As a blogger you want people to engage with your content. Whether that’s leaving a comment, sharing a post, or even clicking a link, you want them to take action.
When it comes to links though, it’s easy to take them for granted. After all, you just link some text and you’re done. It’s pretty much common sense what a link does, so what can you really do to get people to click?
There are marketing methods you can use to get those clicks, but what if you could simply draw more attention to the link? Make it more obvious that yes, that text is indeed clickable.
A big problem I see on many blogs are links that don’t look like links. The reader only knows they’re there when hovering over them. That’s a big no-no.
Links are calls to action. To get people to take action you need to make sure they know an action is available!
The simple solution? Making your links stand out! Below I’m sharing 8 ways to style your links so they get noticed, and thus clicked.
1. Add Color
By far one of the best ways to style a link is to add color! When the majority of your text is black, adding a pop of color here and there via a link is sure to make it noticed.
When customizing your site, it’s important to remember that any old color will not do. You want to make sure the link color you choose coordinates with the rest of your brand. Otherwise your links will stand out, but not in a good way.
Also, keep contrast in mind. A dark color that’s almost black isn’t going to provide much indication that the link is any different from the rest of a paragraph. And if you go too light, there won’t be enough contrast between the white background and your text.
Mariah of Femtrepreneur uses a fun red color to make her links stand out:
To change the color of the links on your site, take a look at your theme’s stylesheet and find the following:
|
1 2 3 |
a { color: #000000; } |
Change the value next to color. That’s it!
.content a or .entry a. That’s where you’ll want to change the color value. Same goes for the rest of the tips below.Need help choosing a color? Check out one of these color tools:
2. Make it Bold
Another way to add contrast to your links is to make them bold! The same way that color helps make text stand out, bolding a link works the same way.
To make a link bold, add the following:
|
1 2 3 |
a { font-weight: bold; } |
or if you’re using a font that has different font weights, use this instead:
|
1 2 3 |
a { font-weight: 700; } |
Make sure to use the proper font weight as not all fonts include the same font weights. For example, Open Sans has weights of 300, 400, 600, 700, and 800. If your text is 400, using 600, 700, or 800 would be good choices for links.
3. Add an Underline
Underlining link is probably one of the most intuitive ways to get the point across that some text is linked. By default, all links are styled with an underline, meaning if you were to remove your stylesheet from your site, each and every link would contain an underline. As such, it’s pretty common to assume that any underlined text is a link. So what better way to callout those links?
To underline your links, use this code:
|
1 2 3 |
a { text-decoration: underline; } |
Another more unconventional way to add an underline to a link is to add a border to the bottom. This method gives you a bit more flexibility when it comes to how the underline is displayed.
On Kory’s blog, she utilizes a bottom border on her links. Notice how there is more of a gap between the text and the underline? This can be done by adjusting the padding of the link.
Here’s the code you’ll need to add a border to your links:
|
1 2 3 4 |
a { border-bottom: 1px solid #000; padding-bottom: 2px; } |
You can adjust any of the above settings to suite your needs.
- dotted
- dashed
- double
4. Style with Italics
Italicizing your links is an easy, yet often overlooked way to style links.
Jamie of Spruce Rd has italicized her links. They stand out, yet seamlessly fit with the rest of her site’s design.
Here’s how you can accomplish that:
|
1 2 3 |
a { font-style: italic; } |
5. Make it All Caps
To take this whole link customization further, what about making them all caps? Odds are your blog posts aren’t written in all caps (they shouldn’t be!), so adding a sprinkling of all caps via your links is a sure way to make them stand out.
If you take a look at my blog posts, you’ll notice my links are styled in this way.
Here’s how you can transform your links to all caps:
|
1 2 3 |
a { text-transform: uppercase; } |
6. Use Another Font
Yet another way to highlight those links is to use another font. This method can be a mess if not done well, so keep the following tips in mind:
Choose a font that’s easy to read. Your body font is likely on the smaller end of the size spectrum. Those fancy display fonts aren’t going to be easy to read at such a small size. Stick with serif or sans-serif fonts for ultimate readability.
For maximum cohesiveness, choose a font from the same font family. A condensed or black version of your font will stand out, without being too different.
Using myself as an example, my links aren’t actually the same font that the rest of my body text is. I chose a font that was similar enough that it wouldn’t stand out like a sore thumb, but different so that I get the contrast I wanted.
7. Add a Background Color
Perhaps one of my favorite ways to make a link stand out is to add a background color! This method really makes a link stand out.
Just check out Caroline’s links:
There’s no way you’re not missing those!
If you’re familiar with my tutorial on styling a link to look like a button, the technique is pretty much the same. All you have to do is add a background color and maybe some padding. You also might want to adjust the font color for maximum readability.
|
1 2 3 4 5 |
a { background-color: #37fcf8; color: #000; padding: 1px; } |
8. Combine!
I’ve saved the best for last! For maximum results, combine any two (or more!) of the above methods for links that really stand out. You may have noticed that in the majority of the above examples, the links featured were colored, even if that wasn’t what we were focusing on. That’s because color really does play a big part in differentiating a link from the surrounding text.
So feel free to mix and match. How about a bold red link? Or maybe an italic link with a subtle background color? The sky’s the limit.
If you use this tutorial to style your links, let me know! I want to see what styles you come up with!
Luckily my links are both underlined and coloured – thanks to my theme 🙂 I’m not sure if I’d remember to style them all for every post, haha. #Lazy
That’s what themes are for! Too much work to style them individually 🙂
It’s a pet peeve of mine when I can’t tell a link of a site 😐 I have to take time to hover and ugh, don’t make me work too hard! lol 🙂
YES! It’s like “is this a link or not?” It should be blatantly obvious!
Love these tips! Links are SO easy to miss so it’s super important to make them stand out. There are definitely a few ways I hadn’t considered in here 🙂
Exactly! Make it obvious!
When I changed he a link css it changes it for all links. But there is no content a or entry a.. ?
It might also be .post a. If there isn’t any, you’ll have to use an inspector tool, such as Chrome inspect element or Firebug, to find out what classes are being targeted for your posts. Then you can use the appropriate class.
Awh! I’m glad you included mine so I know I’m doing something right, haha! I did go back recently and make my Click to Tweet links stand out a bit more against the rest of the post text because it’s like you said: if you want someone to take action, they have to actually see the link or call to action 🙂
Exactly! Make things noticeable and people will take action! 🙂
Great post, Allyssa! I really like the idea of using all caps or adding a background color. Very unique!
Thanks, Maru!
Such a great post, Allyssa! I think links are something a lot of bloggers forget about – sometimes you can hardly tell they’re there! But there are so many different things to try here and what’s great is that they all really help to build your brand. Mine are in a different colour but I’m definitely going to start putting them in bold now 😉
Thanks Holly! Having a different color is a must, all the other effects are a bonus 🙂
It’s really cool that you even included css codes for every tip. I love playing around with html and changing things on my blog every once in a while and these are definitely going to come in handy. Thanks!
Thanks Heide!
This is such a great idea! Even if I have an editor (WordPress) I still forget to make things stand out. This article not only reminded me to do so but really inspired me to think of better ways on how to make them stand out.
Thank you!
Exactly! If you can get your links styled via CSS, then you can blog without having to remember to style your links. Makes things much simpler 🙂
Great info Alyssa!! thanks for sharing, and I am going to attempt to implement this – SO MUCH easier than remembering to “style” each link as you add it to your post, for SURE!!! coding kinda scares me though – I am always afraid I will break something! But I gotta get busy and get this thing going!!! THANKS!!!!
Thanks Julie! It definitely does make it easier (plus it keeps everything uniform!). It can be scary, but as long as you make a backup, you should be fine. I’ve broken quite a number of sites, but just going for it and testing things out is the best way to learn 🙂
Hi, this is an enlighten post, I need help, how do I make just the links in my posts come up with my border and NOT the rest of my links in my WordPress??
Please help me out thanks.
You’ll need to target the class for your posts. So for example, on my site that would be .entry-content a. Yours could be .entry a, .post a, etc. You’ll have to use the inspector to find out exactly what class to target.
Wonderful tips. Luckily my links are usually a separate color and bold as well. It’s true that most bloggers disregard this issue as a non-entity when it is very important. If there was only a way that links could hover as some sort of animation. 🙂
Cheers
Great tips — thanks! Perfect for people who like their theme but want to tweak some details like the links.
Thanks so much! I love doing small CSS changes to my theme like customizing my links. It makes me feel like the theme is more mine.
Thank you ! Your post is clear and gets right to the point – I was able to tweak the color of my links and make them jump off my blog in 2 minutes! The color tool links were perfect. Just signed up as a subscriber – keep those tips coming!
Thanks Jen! So glad you found this post helpful!
Hi Alyssa! Ummm.. help! I just tried adding the underline, and edited in my Editor… but… it messed up my entire website because I deleted the initial code and now don’t know what to put!
The underlines I’ve included are now underlining everything in my menu and my logo in the top left hand corner.. as well as every social media icon. *HELP!*
Made some improvs to your code and it totally worked for me 🙂
Thanks Allysa.
Hey Allysa, thanks for this post. Really helped me out today!