[Resolved] Buttons

[Eivind]

Hi,
How can I get buttons similar to the “Add-ons – Install – Demo” on GeneratePress home page?
I just get some “boring” grey buttons when I try.

..Eivind

[Roberto Enrique]

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 🙂

[Eivind]

Thank you Roberto 🙂

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

…Eivind

[Roberto Enrique]

🙂

[Tom]

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

[Farokh]

Hi,

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

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

[Farokh]

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.

[Tom]

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;
}

[Farokh]

🙂
Thanks

[Farokh]

Hi Tom,

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

[Tom]

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

[Daniel]

Great post 🙂

[Sri]

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. 😀

[Tom]

You would do something like this:

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

[Sri]

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

[Author]

Posts