How to Style your HTML Link into a Button


Styling links to look like buttons is very common in web development. A simple link doesn’t always catch a user’s attention when they’re scanning a website. While it is often a different color than the regular text, it’s rather small and doesn’t stand out much. On the other hand, styled buttons often have an eye-catching background color to them or stand out in a user’s website with unique styles.

Let’s take a look at an example. If you navigate to my site’s homepage you’ll see a light blue ‘continue reading’ button below each of the post summaries.


As you’re scrolling through the posts on my homepage, those buttons are very easy to see and call attention to themselves so that users are more likely to click on them.

What if I hadn’t styled those buttons?


While you can still see that these are links, they don’t have the same impact that the styled buttons have.

Our Link’s HTML

Before we go crazy with the CSS, let’s first write out our link’s HTML and assign a ‘class’ to it. Why assign a class to it? Think of assigning a class name to an HTML element, like giving it a name/identity. It will allow you to be more specific when you are applying the CSS so that this CSS doesn’t get applied to ALL of the links on your website.

As you can see above, I’ve named the CSS class for this “link-btn”. That name is how I will access this HTML and apply styles to it. Where it says “LINK_HERE” is where I would put my URL (don’t remove the quotes). The text that I want to appear for my link goes in “YOUR TEXT HERE”. Pretty straight forward, right?

Setting up our CSS class

If you’re not sure how to add these CSS styles to your blog, follow this guide here.

Now to get started our CSS will look like this:

We use a dot in front of our ‘class’ name because that’s how you access class names in CSS. The brackets mark the beginning and end of the styles for this specific class, link-btn. So all of our styles must go in-between those brackets.

Coloring the Link

The first thing we’ll do to style our link is give it a background color and a text color. In CSS, to give something a background color, you can use “background” or “background-color”. They’ll both work for this. To give the text a specific color we use the CSS rule “color” for that.

What does that look like in CSS?

Two things to notice here. The first is that after “background” and “color” I put a “:” colon. That is to indicate that I’m going to assign a value to “background” and “color”. So after the colon I write out “white” for color and end it with a “;” semi-colon. Why? The semi-colon tells the CSS that this is the end of my value.

While that color “white” is easy to understand, the hashed number/letters for the background isn’t as easy to understand. There are MANY colors, right? So we can’t really go around naming all of them like we have for “white”. Instead of names, we can access specific colors with color codes. In this case, we’re using a ‘hex’ color code. Don’t worry, you don’t have to memorize these. Instead, you go to websites like Color Picker: to find your color code.

confused cat

Cat Tip!

There are actually multiple ways to declare a color, I just prefer the hex code. In all there is the Hexadecimal codes, RGB, RGBA, HSL, HSLA, and the predefined color names. You can see examples of how all of these work on this site.

What do we have so far now? Probably something that looks like this:


Not so pretty yet, eh?

Adding Spacing to the Link

What we want to do now is add spacing around that background so that the text isn’t touching the edges of it. We can do this easily with the CSS “padding”. Not sure what padding is or how it works? Check out this guide here.

For our link button, I’m going to add 10px of padding to the top/bottom of the link and 20px padding to the left/right of the link.

So our CSS looks like this now:

This is short-hand CSS for padding (first number is top/bottom, second number is left/right).

What does our link look like?


It actually looks like a button now! From some people, those styles may be enough for what you need. We’re going to go a bit further though to add some additional styles to our link.

Pushing the Link Away from Other Elements

Right now if I had 2 of these HTML links right next to each other, they’d be touching. What if we want to add spacing between them so that they don’t touch? We can’t do that with padding because it would only increase the blue background of our link.

Instead we use margin to push away other elements.

But wait! Can we do that with a link? By default, a link HTML element is an “inline” element. What does that mean? It means that the HTML doesn’t take up space other than what its content has and it will sit directly next to any other “inline” element. Because of this, certain CSS values don’t work on “inline” elements. So if we try to apply margin or even a width/height to the CSS, it won’t work for our link.

How do we get around that? Easy! All we have to do is apply CSS to change our link from an “inline” element to a “block” element. “Block” is the opposite of an inline element. A “block” element will take up as much width as it can, unless you give it a different width with CSS. A “block” element will also allow us to apply margin to the link.

If we update our link with “display block” and some margin, it will look like this:

For the margin, I only gave it 10px for the top/bottom and 0px for the left/right (since I want this link-button to be full width.

Current link:


Link Button Hover Style

It’s always a good idea to have a hover state setup for your buttons. Usually on a hover for a button you only change the background color of the link. Typically that’s a darker or lighter shade of the current button, but it can also be a different accent color in your color scheme. To setup the hover state for your link, you can use this CSS:

Final Button Styles

The final style we need is to center the text in the link. The CSS style for that is “text-align”.

Centering text:
text-align: center;

All caps text:
text-transform: uppercase;

Add spacing to text:
letter-spacing: 1px;

Smaller text size:
font-size: 13px;

Let’s put it all together now!

And there you have it! We’ve turned our boring old link into an awesome new link button! :D

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge