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
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
.