[Resolved] Custom Non-Form Buttons

[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)

[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>

[Tom]

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

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

[Tom]

No problem!

[Author]

Posts