CSS Basics: Styling Links Like a Boss
The web was founded on links. The idea that we can click/tap a link and navigate from one web page to another is how surfin’ the web become a household phrase. Links in HTML even look different from regular text without any CSS styling at all.
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 font, change the color, remove the underline and make it all uppercase? Sure, why not?
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.
- Link ( :link ): This is probably the least used, but it’s for styling 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.
Note the order there is important:
If you don’t do it in this order (imagine, say, your :visited style comes after your :hover style) the links won’t behave quite how you want. In my imaginary example there, the :visited style would override the :hover style, which is highly unlikely that is what you want. Focus is an accessibility feature, thus last because it is most important.
One way to remember the order is LOVE and HATE. that is L(ink)OV(isted)E / H(over)A(Active)TE.
Here is the same link we have been looking at. First, try hovering your mouse on top of it without clicking and notice that it becomes underlined. Then, click on the link, but leave your mouse button clicked down for a little bit to see how the active style changes the color of the link to black. Finally, let up on the mouse button and the link should turn purple before it’s technically been visited.
Links seem like a simple concept, but boy do they have a lot going on—and CSS gives us some incredible power to customize the experience!
While there is some debate about it, we can use CSS to make a text link look like a button.
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:
Great! Now, let’s use the state-altering powers we learned in the last section to make our faux-button more interactive. We’ll make the button dark gray on hover, black on active, and light gray on visit:
a < background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; >a:hover < background-color: #555; >a:active < background-color: black; >a:visited
Styling a link as a button and taking advantage of the states allows us to make some pretty cool effects. For example, let’s create a button with some depth that appears to get pressed when it’s active and pop back up when the click is done.
We’ve gone into pretty great depth on style links, but there is one more component to them that we cannot ignore: the cursor.
The cursor indicates the position of the mouse on the screen. We’re pretty used to the standard black arrow:
We can change the arrow to a hand pointer on it’s hover ( :hover ) state so that it’s easier to see that the link indicates it is an interactive element:
Whew, that’s much nicer! Now, we have a pretty fancy link that looks like a button with proper interactive cues.
We’ve covered quite a bit of ground here, but it merely scratches the surface of how we can control the style of links. If you’re ready to level up, then here are a few resources you can jump into from here:
- Mailto Links – A good reference for linking up email addresses instead of webpages.
- The Current State of Telephone Links – Did you know you can link a phone number? Well, here’s how.
- Cursor – The CSS-Tricks reference guide for customizing the cursor.
- When to Use the Button Element – If you’re wondering about the difference between a link button and a traditional form button, then this is a good overview with suggestions for which is better for specific contexts.
- Button Maker – A free resource for generating the CSS for link buttons.
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Comments
It sometimes needs to be explicitly stated–definitely not suggesting a change, though I’m sure there are use cases for it.
The could be times where the button or link element can do something other than just being pressed (hand/pointer finger change). There are CSS variations that all have a use and reason – https://www.w3schools.com/cssref/pr_class_cursor.asp – is a helpful tool.
I’m not 100% sold here yet. The link itself looks good, but it now looks surprisingly like a button! Links and buttons are two different things, and unless we’re talking about a button-like link in a Call to Action, I think people expect their link to look like links. The screaming red color and all-caps text make this particular link harder to read as well (red = panic/danger). I had hoped there would be a stronger focus on accessibility (a11y) in this example. For example, a focus on clear underlines, maybe a different background on hover, clear color contrast.
I don’t think the point of the post is to debate if styling a link to appear like a button is a good idea or not — see the resources at the end that go deeper into the debate.
I’ve been back and forth on the issue of styling links in my personal projects, as well as in our code at work, and I’ve decided I’m removing the assumption from my stylesheets that all a tags are links. Our app at work is a platform of legacy systems and a few newer products I’m building, and through out the system there is a mishmash of a tags where some act like buttons, and some are legit links with href attributes, but some a href tags have JS handlers that prevent the default behavior (eg: navigating to a new page) and instead do some extra stuff. My problem with this is, semantically speaking, the a tag is not a link tag, it’s an anchor tag. So I’ve started specifically styling anchors with the :link pseudo-class to ensure I’m not stepping on my toes in other parts of our platform.
a:link < /*. */ >a:visited < /*. */ >a:hover < /*. */ >a:focus, a:active < /*. */ >From here I can qualify different links with modifier classes, ala Bootstrap, allowing my .btn styles to respect the cascade and style .btn:links differently without specificity forcing me to over-qualify or reorganize my selectors, or having to use !important .
// Good a < /*. */ >// Generic anchor styles // Good a:link < /*. */ >// Default link styles // Good .btn < /*. */ >// Default button styles .btn:link < /*. */ >// Button styles as they apply to links // Not so good a.btn < /*. */ >// This obliterates our .btn styles, but gets trumped // by our .btn:link styles, which can be confusing I would just like to see more people using the :link pseudo-class to make their styles a little more explicit, and potentially alleviate unintended side effects in their projects.
The big problem with using :link for such purposes is that it only applies to non-visited links. To cover all links, you need :link, :visited —and so it’s commonly easier to just write a . (Of course, the two aren’t equivalent anyway. :link, :visited is instead equivalent to a[href], area[href], link[href] .) What does “anchor” even mean? I’m actually not sure about this. Long ago, was used so that you could add a hash of #x to jump to the right place in the document; but for many, many years, just giving an element an id has been the preferred way (e.g. ). Frankly, is only used for links now.
I’m missing mentioning the behaviour for touch devices. Touch behaviour should be part of the basics now, shouldn’t it?
Oh absolutely! Touch is mentioned at the top and these basics largely apply in both cases, with exception to :active and :hover: (though, some devices are handling these in a touch context). Are there any other basics you had in mind?
Just a reminder that not everyone “hovers” on links. Keyboard users “focus” on them, and it’s important that those users can distinguish when a link has focus. It’s easy to ensure this by applying the same style rules to both the :hover and :focus states. There is also a hierarchy to the link states that trips up many people. I learned the following mnemonic to remember which order to define the link state styles in: LoVe HAte (:_l_ink, :_v_isited, :_h_over [also :focus], :_a_ctive).
CSS Links
With CSS, links can be styled in many different ways.
Styling Links
Links can be styled with any CSS property (e.g. color , font-family , background , etc.).
Example
In addition, links can be styled differently depending on what state they are in.
The four links states are:
- a:link — a normal, unvisited link
- a:visited — a link the user has visited
- a:hover — a link when the user mouses over it
- a:active — a link the moment it is clicked
Example
/* unvisited link */
a:link color: red;
>
/* visited link */
a:visited color: green;
>
/* mouse over link */
a:hover color: hotpink;
>
/* selected link */
a:active color: blue;
>
When setting the style for several link states, there are some order rules:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
a:visited text-decoration: none;
>
a:hover text-decoration: underline;
>
a:active text-decoration: underline;
>
Background Color
The background-color property can be used to specify a background color for links:
Example
a:link <
background-color: yellow;
>
a:visited background-color: cyan;
>
a:hover background-color: lightgreen;
>
a:active background-color: hotpink;
>
Link Buttons
This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:
Example
a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>
a:hover, a:active background-color: red;
>
More Examples
Example
This example demonstrates how to add other styles to hyperlinks:
Example
Another example of how to create link boxes/buttons:
a:link, a:visited <
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
>
a:hover, a:active background-color: green;
color: white;
>
Example
This example demonstrates the different types of cursors (can be useful for links):
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.