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



Join the Discussion
Write something…
Recent messages
Matinki Premium
How do I edit mine to open a new page mine not opening a new post here is the short code>>


<div class="wp-block-button">CHECK AMAZON PRICE</div>

How do I edit this to open a new window?

Thank you
Reply
keishalina Premium
hey hi Martin -- all questions are good ones!

just so you know, your question landed in the awesome WA community for response and here we are ....

Marek is likely quite busy and surely, she'll reply when she gets a moment ...

all the best to you, cheerio ... :)
Reply
Matinki Premium
Thank you for the feedback.
Reply
sheikave Premium
Wow it is great when we have some coding skills.
Reply
LouisaB Premium
This was awesome Marek, thank you for compiling and sharing this training.
Reply
MarekO Premium
Thank you Louisa:)
Reply
bigrog44 Premium
Thanks for sharing, Marek.
Reply
PatrickM1 Premium
Hi Marek - Nice training. Thanks for putting this together.
Reply
Top