How to style a link to look like a clickable button on your blog

Sometimes a simple link isn’t enough, sometimes using a “button” makes the link stand out more and is easier for readers to identify the link as clickable. While this isn’t actually a button (using the button tag) we can style links to look like clickable buttons. Here is an example of a link that is styled to look like a button

This is a button!

How to style a text link to look like a clickable button

1. Add a class to your regular link (how to create a text / image link) in your blog post, page or sidebar. Choose a descriptive class name, here we’re using blackbtn to identify it as the black button.

<a href="URL" class="blackbtn" title="DESCRIPTION">BUTTON TEXT</a>

Note – You could also wrap the link in a div that has the class, instead of adding the class to the link itself.

2. Now in your CSS (style.css file on WordPress or before ]]> </b:skin> in your Template on Blogger) add the CSS using the class name as the selector. Apply a background colour, a text colour, padding + margin value (How padding + margins work) and any other styling you would like for the button in it’s normal and hover state.

/* XOMISSE START CSS FOR BUTTON  */
.blackbtn {
background-color: #333; /* adds a background colour to the button */
color: #fff; /* changes the text colour */
cursor: pointer; /* changes the mouse on hover */
padding: 10px 30px; /* adds 10px of space to top and bottom of text and 30px of space on either side */ 
}

.blackbtn:hover {
background-color: #fff; /* adds a background hover colour to the button */
color: #333; /* changes the text colour on hover */
}
/* XOMISSE END CSS FOR BUTTON */

It’s that simple! You can add a few different styles using different class names to use throughout your blog / website. Check out the other posts in the HTML Basics for Beginners series here. Let me know if you have any other HTML / CSS queries.

Want it centered?
There are a couple of ways to center items like this, as listed in this tutorial. The easiest way to centre the button while keeping it flexible (not using a set width, etc) is to wrap the link with a span tag like

<span class="centerbtn"> <a href="URL" class="blackbtn" title="DESCRIPTION">BUTTON TEXT</a> </span>

and then adding this to your CSS

.centerbtn { 
text-align: center;
display: block;
margin: 20px auto; /* will add 20px of space around the button */
}

Want to apply this to an existing element?

Simply change the selectors shown above (.blackbtn) for the selector of the element you want to change. For example if wanting to change the Read More link on Blogger you can use .jump-link a and .jump-link a:hover.