How to style a link to look like a clickable button on your blog – Basics of HTML #9

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.

31 comments

  1. Kathryn on

    This was so clear and helpful! I love following this blog because you’re always giving me new inspiration for ways to jazz up my blog a little bit at a time.

    x Kathryn

    Reply
  2. jordan taylor on

    Hey Elaine, How would I go about using this feature on my “older posts/newer posts/home” links at the bottom of my page? I figured I could use your “customize the newer and older post link on blogger” tutorial, but the code elements don’t really line up. I know this is almost like a new tutorial, but any help would be MUCH appreciated! Best, Jordan

    Reply
  3. Sophie on

    Loved this post Elaine, I have been looking for something like this for ages! I followed the steps to apply this to my read more button, but nothing changed. I have no idea what i’ve done wrong! I did this on a test blog of mine, would I be able to invite you to look at it? x

    Reply
  4. Sherrie on

    Thank you Thank you Thank you! Super neat. This works great for a download button for me. I had used actual picture buttons for a downloads link in my blog and I would always have trouble in Blogger when I made the links, it was such a headache because it seemed like sometimes they disappeared or just did something whacky. This solves that problem!

    Reply
  5. Janeese on

    Hey Elaine, I love this tutorial it worked beautifully.
    One question though. When I hover over my button the text become underline. I don’t really like the way it looks, any idea how to fix that?
    Thanks

    Reply
  6. Em on

    This tutorial is fantastic, I’ve just used it to create labels in my sidebar (under “categories”)! But I was wondering if there was a way to make all of them line up to fill the width of the sidebar? Thanks!!

    Reply
  7. Cassidy on

    Hello, I was wondering if theirs a way to make all the buttons the same width. Like if I had a couple buttons stacked up if they could all be the same width? All line up?

    Reply

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.