The web was founded on links. The idea that we can click/tap a link and navigate from one web page to another.
Links in HTML even look different from regular text without any CSS styling at all.
<a href="https://example.com/">a link</a>
They are blue (purple if visited). They are underlined. That’s a link in it’s purest form.
But what if we want to change things up a bit? Perhaps blue doesn’t work with your website’s design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just we can any other element. All we need to do is target the element in our stylesheet.
Want to use a different color, remove the underline and make it all uppercase? Sure, why not?
a {
color: cyan;
text-decoration: none;
text-transform: uppercase;
}
Now we’re cooking with gas! But why stop there? Let’s look at a few other ways we can style links to complete the experience.
Style Each Link State
Links have different states, meaning they adapt when we interact with them on a webpage. There are three additional states of a link that are worth considering anytime we change the default style of links:
- Link (
:link): This is probably the least used, but it’s for styling <a> elements that have an href, rather than placeholder links.
- Visited (
:visited): The appearance of a link that the user has clicked on the page before when the mouse cursor is not on top of it. The styles you can apply to :visited are restricted for security reasons.
- Hover (
:hover): When the mouse cursor is place on top of the link without a click
- Active (
:active): When the link is in the process of being clicked. It might be super quick, but this is when the mouse button has been depressed and before the click is over.
- Focus (
:focus): Like :hover but where the link is selected using the Tab key on a keyboard. Hover and focus states are often styled together.
Links seem like a simple concept, but boy do they have a lot going on—and CSS gives us some incredible power to customise the experience!
Like other HTML elements, CSS can add background colors and padding to links that allow us to create the appearance of a button. Here’s our link using those techniques:
But first, let's take a look at the wrong approach. The code snippet below leads to the targeted website when it is clicked.
<a href="https://example.com//">
<button>Example</button>
</a>
However, this is not valid HTML.
The a element can be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links). - (Source: Web Hypertext Application Technology Working Group)
This is considered bad practice because it makes it unclear as to the user's intent.
Links are supposed to navigate the user to another part of the webpage or an external site. And buttons are supposed to perform a specific action like submitting a form.
When you nest one inside the other, it makes it confusing as to what action you want performed. That is why it is best to not nest a button inside an anchor tag.
Lets take above code and change background color instead of font color, or set white color for font"
a {
background-color: cyan;
color: white;
}
Lastly, we can add some padding around the text:
a {
background-color: cyan;
color: white;
text-decoration: none;
text-transform: uppercase;
padding: 15px 25px;
}
Now we have an anchor tag that looks like a button.
We can also make this "button" be a little more interactive by changing the background color depending on the state of the link.
a:hover{
background-color:#01b6b6;
}
We could get more intricate with the design, but this is just to show you the basics of styling a link like a button.
What are the issues with this approach?
There is some debate whether it is good practice to style links as buttons. Some will argue that links should always look like links and buttons should look like buttons.
In the web book titled Resilient Web Design, Jeremy Keith states that
one material should not be used as a substitute for another, otherwise the end result is deceptive.
Why did I bother to bring up this debate?
My goal is not to make you choose one side of the debate over another. I just want you to be aware of this ongoing discussion.
Happy Coding...
