How to Create Custom CSS Buttons in WordPress

Sometimes we need a call-out button or a ‘Go here’ button but designing a button in WordPress has never been easier. Just follow the steps given below and you will have a shiny new button created in no time.

This is accomplished using an external button creator website so there is no need to install any plugin as well!

How to add custom buttons in WordPress using CSS, HTML.

1. Go to http://www.bestcssbuttongenerator.com/
2. Choose a button design to modify.
3. Modify using the color options given at the bottom of the button.
4. Use the sliders on the right to adjust the dimensions, font size, etc
5. Click on Get CSS button, paste to a text file – we’ll come back to this
6. Click on the Get HTML button, paste to another text file – we’ll come back to this as well
7. Now go to your WordPress > Appearance > Editor > Style.css.
8. You’ll paste the CSS code at the bottom of Style.css that you copied from Step 5 above.
9. Save
10. Then go to your Post or Page where you want to add the button.
11. Paste the HTML code copied from Step 6 above.
12. Edit the HTML code’s href link from # to the URL you want the button to take you when clicked.

And you’re done.

 

Here’s an example:

My First Custom Button using CSS