Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

Home Forums Support Buttons

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #206423
    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

    #206438
    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 πŸ™‚

    #206512
    Eivind

    Thank you Roberto πŸ™‚

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

    …Eivind

    #206517
    Roberto Enrique

    πŸ™‚

    #206886
    Tom
    Lead Developer
    Lead Developer
    #246789
    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>

    #246796
    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.

    #246858
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #247046
    Farokh

    πŸ™‚
    Thanks

    #247101
    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.

    #247162
    Tom
    Lead Developer
    Lead Developer
    #263722
    Daniel

    Great post πŸ™‚

    #303255
    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. πŸ˜€

    #303416
    Tom
    Lead Developer
    Lead Developer

    You would do something like this:

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

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

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.