When it comes to creating a website design, styling web page links (also referred to as hyperlinks) is probably the last thing on our minds. However, adding special effects to page links can help make your website design more appealing to users’ eyes.
But the unfortunate reality is that, there are several critical design aspects that web designers often need to deal with (like call-to-action buttons, web forms, etc.); which eventually makes them forget about styling their website links. In fact, many newbie designers don’t even realize the benefits they can avail, by manipulating the web page links using style sheets.
With this post, I would like to talk about what exactly a link does, some basic things to consider when styling links using CSS and a few examples.
An Overview of Links (aka Hyperlinks)
As we all know, hyperlinks help connect one web page to another, helping us navigate throughout the website. For instance, a hyperlink within an article help redirect users to other related articles published on your website, or you can even add links that connects your site visitors’ to some external source. The possibilities are endless!
Things to Consider When Styling Links
This section will throw light upon some basic principles that you should be aware of when designing web page links.
Different States of a Link
While working with CSS to style links, you ought to have familiarity with the several link states. These states are also called pseudo-classes, and are used to style each of the web page link individually. Let’s take a look at the 4 type of hyperlink states:
:link – this is the normal or default state of a link.
:visited – this state specifies whether the link has been visited before.
:hover – this state is used to define when users hovers their mouse cursor over a link.
:active – this state identifies the current link that user clicks on.
Note: Remember that you need to use these states with the tag in your CSS selector.
A Look at CSS Properties
There are several CSS properties using which you can tweak the visual appearance of your links. Let’s take a look at some of the most common CSS properties:
color – It can be used to change the color of the link.
background-color – It can be used to change the background color of the link.
text-decoration – Setting this CSS property to none help you get rid of the default underline.
font-weight – Make your link style bold.
Examples to Illustrate: How to Style Links in CSS?
Example 1 – Removing Underline
Let’s take an example to illustrate how you can modify the state of your link using a few CSS properties. Imagine you have a web page that contains links with a underline. Now, you want the underline to disappear, when you moves the mouse over the link. You can’t do so merely using HTML alone. However, this can be done easily using CSS.
a:link { text-decoration: underline }
a:hover { text-decoration: none }
Example 2 – Adding Color to Links
Color is one of the most vital elements of web designs that can easily grab visitors’ attention towards the design. Here is an example that will show how you can style your page links, by changing its color when the user moves the mouse over it.
a { color: #ffffff; }
a:hover { color: #ff4c4c; }
This will change the link color from black to light red, when user places a mouse over that link. Using the similar approach, you can also change the link color when it is in active or visited state, as shown below:
// Changing link color from red to yellow when it is clicked
a { color: #80BFFF; }
a:active { color: #ffff00; }
// When a user visits a link its color changes from red to chocolate
a { color: #80BFFF; }
a:visited { color: #d2691e; }
Example 3 – Adding Backgrounds and Icons to Your Web Page Links
If your link contains an associated icon, you can change to a different one as you hover the icon or view it other states.
a {
padding: 0 2px 1px 16px;
background: #a9a9a9 url(abc1.gif) left center no-repeat;
color: #ffff00;
}
a:hover {
background: #a9a9a9 url(abc2.gif) left center no-repeat;
}
a:active {
background: #a9a9a9 url(abc3.gif) left center no-repeat;
}
Wrapping Up!
Creating a good design requires us to focus on several aspects; we often pay attention to the most important ones, and forget to pay heed to styling our web page links. But even well-designed links can make a website design look more impactful. You can make your website links a part of your design, simply by adding some style to it using CSS.
Hopefully, this post will help you learn about simple yet important factors that will definitely help you add great effects to your page links.
Author Bio – Sarah Parker is an experienced PSD to WordPress service provider, and a web designer. She loves to share her thoughts on web design and web development trends.
