[Resolved] Custom Non-Form Buttons

Home Forums Support [Resolved] Custom Non-Form Buttons

Home Forums Support Custom Non-Form Buttons

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #201340
    Jessica

    I’m trying to create my own buttons. After ‘customizing’ link colors and then FORM buttons, there seems to be absolutely no way to add my own styles to override these colors/styles and I can not get my own button styles, colors, hover affects, etc. to show.

    What is going on that is preventing me from adding my own button styles?

    Any chance you’ll be adding an additional option for “other” buttons aside form regular links and form buttons. I’ve been searching for 2 days and can’t find a single way to override what’s here no matter what I do.

    (NOTE: I don’t want to install ANOTHER plugin just to handle buttons, since it’s relatively easy to add styles…there’s just no way to override the “set” link styles form the *cough* customizer)

    #201402
    Roberto Enrique

    It shouldn’t be that difficult. I usually add some custom classes just for buttons on my childs like this:

    
    /*BUTTONS*/
    .small {
        border-radius: 50px;
        font-size: 0.8em;
        padding: 4px;
    }
    .button.red{
      background: #FC2232 none repeat scroll 0 0;
    }
    .button.red:hover{
      background: #FF4848 none repeat scroll 0 0;
    }
    .button.yellow{
      background: #FCB004 none repeat scroll 0 0;
    }
    .button.yellow:hover{
      background: #FCCC04 none repeat scroll 0 0;
    }
    
    .button.green, a.button.green{
      background: #19bd0f none repeat scroll 0 0;
      color: #fff !important;
    }
    .button.green:hover, a.button.green:hover{
      background: #1aa511 none repeat scroll 0 0;
      color:#fff !important;
    }
    .button.blue{
      background: #187AAB none repeat scroll 0 0;
    }
    .button.blue:hover{
      background: #1FA0E0 none repeat scroll 0 0;
    }
    
    

    And I can have also smaller buttons just appending the small class to the links.

    <a href="#" class="button blue small">This is a blue button</a>

    #201435
    Tom
    Lead Developer
    Lead Developer

    CSS is the way to go.

    The .button class already has the necessary styling to make it a button, so adding classes based on the .button class like Roberto has suggest above is perfect.

    There’s even more colors you can find here: https://generatepress.com/forums/topic/custom-colors-for-buttons/#post-143266

    #201616
    Jessica

    Thanks for the update. I wasn’t able to find this anywhere so I wasn’t aware that all these other button styles were available already. I usually create my own so this is why it wasn’t working.

    I’ll make a note of it and bookmark the above. Thanks.

    #201676
    Tom
    Lead Developer
    Lead Developer
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.