[FIXED] CSS code not working the way It should in the WordPress header

Issue

I want the size of the button to be shorter like the following image:

But when I added the custom CSS to the WordPress site, It changed the button size.

#menu-item-11695 {
    box-shadow: 0px 7px 14px -7px #3e7327;
    background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
    background-color:#77b55a;
    border-radius:3px;
    border:1px solid #4b8f29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:13px;
    font-weight:bold;
    padding:9px 8px;
    text-decoration:none;
    text-shadow:0px 1px 0px #5b8a3c;
}
#menu-item-11695:hover {
    background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
    background-color:#72b352;
}
#menu-item-11695:active {
    position:relative;
    top:1px;
}

---

Solution

You should inspect the parent of your buttons. Your button probably takes 100% height from his parent.

Answered By - David Nazar