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.

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