[Support request] Add extra button to header element

[Renske]

Hi there,

I want to add an extra button to my header element with a hoover effect. How do I do this? See my website in the private info.

[David]

Hi there,

you can add another menu item with the nav-button class to make it look like a button.
If you want that style to be different to the other button then give it a second class eg.

nav-button button-two

We can then use the second class to change the button styles.

Let me know

[Renske]

Hi there, I mean the button on the header image (not the button in the navigation bar) 🙂

[David]

Aah sorry about that 🙂

So you can do this:

<a class="button hero" href="#aanbod">Bekijk mijn diensten</a>
<a class="button hero two" href="#other-button">Another button</a>

That will display the two buttons inline.
You can add a little CSS to give them some space:

.button.hero {
    margin-right: 10px;
}

[Renske]

Hi David, thanks!

To make things a little more complex (sorry ;-)) I want to make the second button less prominent. So the first one has to remain green and I want the second one to have a white background with green text and green border (no hoover effect). Ho do I do this? 🙂

[David]

Ok, so change this CSS:

a.hero.button {
    background-color: #78c16c;
    color: #fff;
}

to:

a.hero.button {
    border: 3px solid #78c16c;
    background-color: #78c16c;
    color: #fff;
}

And add this CSS to style the second button:

a.hero.button.two, a.hero.button.two:hover {
    background-color: #fff;
    color: #78c16c;
}

[Renske]

Thanks David! I did tweak the CSS a little bit more and now the colors of the buttons are to my liking 🙂

[David]

Glad to hear that !!

[Author]

Posts