Today we’re talking buttons! Buttons are an excellent and fabulous way to let visitors know there’s a call to action. We’re all born learning to press buttons for things to happen, right? So let’s carry that behavior over to our websites by using buttons to get people’s attention.
A lot of sites are set up with pre-made button classes in their CSS. And that’s great, because it makes it way easier for you to use those on your site. But did you know you can create your own custom button, or customize the code to make the buttons that match your site’s theme? Yes, you can! I’m going to show you some code you can use to create your own buttons.
Lets say I want a pink button on my site. I need to set up a class in my CSS stylesheet (the style.css file). A class is something that once it’s set up in the style.css file, can be used all across your site.
Here is the class I set up for my button:
With that CSS saved in my style.css file, I put the following on my page editor in the HTML:
<a class=”pink-button” href=”/about”>My About Page</a>
And with that code, I get this:
Let’s break down that CSS code to see exactly what it is I’m telling my stylesheet to create:
the pink color
this creates the rounded edges for the button. i did 9px purely because i prefer odd numbers to even numbers. #tiffquirks
this is the color of the text
this is how much space is between the edges of the button and the text
this means that the text in this button will always be lowercase
There are a ton of different ways to create your button. Go ahead and have some fun creating something that’s custom for your site. If you build it, they will click.
Feel free to leave any questions you have in the comments!