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.

Post last updated:

32 responses to “How to style a link to look like a clickable button on your blog”

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

    1. Thank you so much Kathryn, so glad you like it! 🙂

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

    1. Hi Jordan, you can combine the two changing the selectors shown above (.blackbtn) for the selector of the navigation links as shown in this tutorial. Hope that helps!

  3. How can I use this button for read more? 🙂

    1. Hello, yes I talk about how under the “Want to apply this is an existing element” heading 🙂

      1. lovely

        I am sooo stupid xD SORRY! I just over read it!
        xo 🙂

        1. haha that’s okay 🙂

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

    1. Hello Sophie, yes no problem. Can you invite ********@gmail.com and I’ll take a look.

      1. Sophie

        Thankyou so much! I added you as a blog reader x

        1. Sophie

          Hey Elaine, just letting you know that you don’t need to worry about checking my test blog, it worked! Thank you anyway! x

          1. Ah perfect Sophie, just had a look and it looks great!

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

    1. Hey Sherrie, awesome! So glad you liked it 🙂 it’s definitely easier than using images, and much more benficial for your blog!

  6. Janeese

    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

    1. Hello, apply text-decoration: none; to your hover links a:hover 🙂

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

    1. Hello, thank you! Just add a width and display value to the selector in the CSS 🙂

  8. Thanks for this! I just did it and got the approval email right away! I’ve been wondering how to do this myself! Very clear instructions!

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

    1. Hey, add width: 400px; to your CSS, and change the number to reflect the size. Keep in mind that longer text will overflow the set width so you’ll have to adjust the css to solve that too.

      1. I’m sorry to bug you again but the width isn’t working it isn’t doing anything. I’m trying to use the button on this code if it’s any help.

        [AddThis Button]

        1. Ah, that’s different then because it’s a third party plugin. It’s controlled by script, so CSS won’t override it.

      2. Is their a way I could change the width through the script?

        1. You can’t access the script since it’s hosted by a third party I’m afraid.

      3. Oh that sucks. But thanks so much for your help.

  10. Sudheeksha

    Hi Elaine,
    How can I use this button to display some label links in my sidebar?

    1. You’ll need to find the selector ID or class used for the labels, then using it you can apply the styling you used for the button to it.

  11. And also how do I change the font in the button to say, Molengo? Sorry for the trouble!

    1. To change the font, add the font-family style to the CSS using .blackbtn

  12. Thank You, a good article,

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.