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:
- Upload the button style sheet to your child themes root directory
- Register 2nd style sheet for buttons by adding 4 lines of PHP code to your child themes functions.php file
- 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.
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.
Here’s a demo of what the different sizes look like:
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.