Reply To: Custom Non-Form Buttons

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