• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Free CSS3 Buttons Include 14 Colors & 4 Sizes

In this post i’ll supply all the code you need to add buttons in your theme.

There’s 3 steps needed to install these buttons:

  1. Upload the button style sheet to your child themes root directory
  2. Register 2nd style sheet for buttons by adding 4 lines of PHP code to your child themes functions.php file
  3. Copy & paste HTML into your WordPress text editor to display your button.

Buttons Style Sheet

After you download the CSS code for the buttons, simply upload the file to your child themes folder.

Download CSS

Here’s the location the file should be added in the child theme.

child themes folder

Register 2nd Style Sheet

Copy & paste this code at the end of your child themes functions.php file.

This code will register & enqueue the buttons.css file correctly so you can then add the buttons anywhere in your theme using any of the following HTML snippets.

HTML for Buttons

Choose any of these sample snippets depending on which size you want your button to display.

You can also change the color to one of 14 different button colors.

Sizes

Here’s a demo of what the different sizes look like:

button sizes

Button Colors

button colors

Here’s the background hex code colors which are included in the CSS code.

#f9f9f9; /* Alabaster */

#1874cd; /* Dodger Blue */

#cd0000; /* Red 4 */

#ff7f00; /* Dark Orange 1 */

#ecca06; /* Yellow Gold */

#2e8b57; /* Sea Green 4 */

#838b83; /* Honey Dew 4 */

#5d478b; /* Medium Purple 4 */

#cd1076; /* Deep Pink 3 */

#b22222; /* Fire Brick */

#8b6508; /* Dark Golden Rod 4 */

#8b4513; /* Saddle Brown */

#c0c0c0; /* Silver */

#696969; /* Dim Gray */

#080808; /* Black */

You can easily change the background and/or hover colors for each button in the buttons.css file.

Source: The source of the CSS for the buttons comes from the Responsive theme by Cyberchimps.

More Options for Buttons

  • Circle Buttons
  • Free Button Maker Plugin for WordPress

Reader Interactions

Comments

  1. Terence says

    October 26, 2013 at 12:02 am

    Hey Brad,

    Your like-gate plugin’s not working.

    I liked but got no stylesheet download…. 8^(

    Terence.

    Log in to Reply
    • Brad Dalton says

      October 26, 2013 at 12:11 am

      Try it now Terence

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.