Archived topic

Button shape

4 replies · Started by pz on October 3, 2017

Viewing posts 1–5 of 5

October 3, 2017 at 5:26 am #396490

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/

October 3, 2017 at 5:43 am #396497

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

October 3, 2017 at 8:46 am #396701

Hi there,

Try this additional CSS:

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

October 3, 2017 at 11:02 am #396795

It worked. Thank you very much.

October 3, 2017 at 1:05 pm #396877

Glad we could help!

This archived topic is closed to new replies.

Start building better websites today.