[Resolved] Button shape

[pz]

Hi, my website is http://canavac.pl/. I added this button to my main navigation:

.button.transparent {
    background-color: transparent;
    padding-top: 0px;
    padding-bottom: 0px;
    border: 2px solid #000;
    border-radius: 10px;
    outline: 0 none;
}

.button.transparent:active, .button.transparent:hover {
    background-color: #fff;
    color: #222;
}

It looks like this on the website:

How to make it smaller to look like this:
https://campuspress.com/

[Heiko]

Hi!

Your button has the following properties:

.button, .button:visited {
    padding: 10px 20px;
}

and

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
    padding-left: 12px;
    padding-right: 12px;
    line-height: 70px;
}

If you change this, you can make your button smaller.

Heiko

[Leo]

Hi there,

Try this additional CSS:

.main-navigation .main-nav ul li.button a {
    line-height: 35px;
}

[pz]

It worked. Thank you very much.

[Leo]

Glad we could help!

[Author]

Posts