Until now we've created some basic button and now we'll make it look better. We will do it using the CSS which will enable us to change various parameters like button color, font color and size, size of the button and so on...
The following code is the one I've used (I had to take the screenshots because it wasn't very readable when I've pasted the code):
And a little explanation of the code:
You need to insert this code only once into Stylesheet of your child theme - style.css. To reach it go to the Wordpress dashboard and in the left menu click on Appearance -> Editor:
Add the CSS code at the end of the style.css file.
Optional - the code below will add a little bling to your button - it will add the hover effect which will change the button color to the one you define here:
input.name-of-your-button-in-css:hover {
background: #437bd0;
}
And in my case it looks like this:
input.button-affiliatedisclosure:hover {
background: #437bd0;
}
And this is how the final product looks like:
I have to say that the transition between the colors looks much smoother in real life, its just my crappy gif:)
Final Words
That's all folks! I hope you've found this tutorial helpful and easy to understand. If you did, please don't hesitate to hit the like button;) In case you have any questions or suggestions please be sure to leave a comment. I'm just a beginner in this but I will try to answer as best I can. And I'm sure that if I won't know the answer someone here on WA will.
I wish us all much success on our WA journeys:)
Marek