One of my favorite parts of designing blogs is experimenting with different ways of styling links. It totally changes the user experience. Some bloggers use CSS to change the color of links so that people know to click it. Others create full on blog graphics just by adding some coding to their links. I believe that even adding really subtle codes to links (and blog elements in general) can totally set one blog apart from another. Here are three of my favorite simple ways to style links. (For a CSS refresher, check out this post from a few months ago!)
1. Bold Underline
You can underline any link simply by adding “text-decoration: underline;” to the stylesheet. However, adding a border to the bottom of the links allows you to control the thickness and style of the underline. Here is an example of what the coding would look like followed by the styled link itself:
<span style=”border-bottom: 6px solid #518CE8;”>Bold Underline #1</span>
Bold Underline #1
<span style=”border-bottom:3px dashed #FFD2BB;”>Bold Underline #2</span>
Bold Underline #2
2. Button Style
I love styling links as buttons! It’s so cool to be able to create a blog link out of text and some codes (instead of just a Photoshop graphic). I explained it in-depth in this post, but using CSS to style links allows them to be cleaner, crisper, and easier to adjust on a whim. A lack of graphic images will also speed up your page loading time.
<span style=”border: 3px solid #282828; padding: 15px; text-transform: uppercase; letter-spacing: 3px; font-weight: 600; font-family: futura-pt;”>Button Link</span>
Button Link
<span style=”border: 2px dashed #FF9C69; background: #FFF7F3; padding: 15px; text-transform: uppercase; letter-spacing: 3px; font-weight: 600; font-family: futura-pt;”>Button Link</span>
Button Link
3. Simple Hover effects.
There are times when it’s good to just keep your links simple. For example, in the body text of your blog, your links can be the same font family and style as the rest of your body text. But a hover effect reminds people to click the links. That’s important. Rather than being redundant, I’m just going to send you over to this post all about how hover effects work. It’s way too much fun.
How do you like styling links on your site? I love subtly but I also am so happy when I come across bold link effects on blogs. Gotta get fancy sometimes. :)
Alexandra says
Fantastic post and advice! You guys offer up the best tips. Love it xo
Warm Regards,
Alexandra
http://www.littlewildheart.com
Marie Warne says
Hi Jennifer,
Thanks for these codes. I have a Squarespace blog and tried entering the code snippet for the bold underline (thick solid underline). It gave me a syntax error on the first line. Do you know why this is? I’ve successfully used some of your hover effects on my blog so I don’t know why this one isn’t working. Thanks for posting.
Marie
Jennifer says
Hi Marie,
How strange! If you send me a screenshot (or copy/paste) the coding you used, I can try to figure it out. It might have something to do with how I used inline CSS in the example above (the part). Feel free to email me at jennifer@earlgreyblog.com :)
Maryanne says
I love reading this content, it is very insightful
I have a blog on Luxury in Africa and I would like to add it to this platform, Kindly advice me how I can do so? In the lifestyle section. This the blog: https://maryannenjeri.wordpress.com/
Thanks,
Maryanne.
Jennifer says
Hi Maryanne! Thanks for visiting. Here is one of my favorite tutorials on how to move your blog from WordPress.com to WordPress.org: http://www.wpbeginner.com/wp-tutorials/how-to-properly-move-your-blog-from-wordpress-com-to-wordpress-org/
Hope this helps!