Buttons

Easy, create custom classes for your custom buttons :)
If you want exactly the same Look as the buttons you see on this site you can add this to your css:

/*FOR THE TRANSPARENT BUTTONS*/

.button.transparent {
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 5px;
    outline: 0 none;
}

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

/*GREEN BUTTONS*/

.button.green {
    background-color: #5ea337;
    border: 2px solid transparent;
    border-radius: 5px;
    color: #fff;
}
.button.green:active, .button.green:hover{
    background-color: #70b44a;
    color: #fff;
}

Then you just create your buttons adding the classes to your links like:

<a class="button transparent" href="#">I'm Transparent</a>
or
<a class="button green" href="#">I'm Greeen!</a>

That should do the trick :)

Thank you Roberto :)

I was not sure if GeneratePress had some builtin shortcodes for this.
Will use the code you provided!

...Eivind

:-)

There's some more button CSS here as well: https://generatepress.com/forums/topic/custom-colors-for-buttons/#post-143266

Hi,

To create link buttons, I added the CSS mentioned above, but where exactly should I add this:

<a href="#">I'm Transparent</a>

OK I toyed with it and got it right :) , But a new question is How do I make all buttons same size, some button texts are longer than others, I want to have them in the same length.

Buttons will adapt to the width of their text.

You can add a width to the button class if you like:

.button.my-button-class {
    width:150px;
}

:)
Thanks

Hi Tom,

How can I add like borders (or button borders) to my items on the main menu? Sign Up & Log In, in particular.

This might help: https://generatepress.com/forums/topic/adding-a-button-to-menu-workaround/#post-228678

Great post :)

Hi there, this is very helpful, as I want to add button on a page header which I merge which site header.

Can you help me a bit further? What if I want to change to text/font family, size, weight, and transform for the text inside the button? What code in the CSS should I add?

Thank you very much for your helpful responses Tom and the gang. :D

You would do something like this:

.button {
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
}

Thank you very much for your response & assistance, Tom.