Beautiful css link styles

CSS Links

In this chapter, we will explain how we can give styles to links, how to make links more beautiful.

The link has these four states:

• a :link — a normal, unvisited link
• a :visited — a link that the user has already visited
• a :hover — a link when the user hovers over it
• a :active — a link at the moment when it is clicked

We will speak about these properties:

Text Decoration

As you remember when we create a link, by default it is underlined. When we want to remove it we must use text-decoration property.

Example of using the text-decoration property to style a link:

html> html> head> title>Title of the document title> style> a:link < text-decoration: none; > a:visited < text-decoration: none; > a:hover < text-decoration: underline; > a:active < text-decoration: underline; > style> head> body> a href="#"> This is some link. a> body> html>

Let’s explain the meaning of our code.

Here you can see that our link in its first and second state will be without underline. The link is underlined when the user mouses over it and when a link is clicked in the moment.

You can check it in your browsers with your editors or with our online editor click here and go to the page of the editor.

Color

The color property we use for the color of the link.

For example when we want our link to be black and to be #1c87c9 in its 3rd state (a: hover) we need to write the following:

Example of using the color property to style a link:

html> html> head> title>Title of the document title> style> a:link < color: #000000; > a:visited < color: #000000; > a:hover < color: #1c87c9; > a:active < color: #1c87c9; > style> head> body> a href="#">This is some link. a> body> html>

Result

Background Color

What can we do if we want our link to be with a background?

We just need to give a style with background-color property.

For example, our link will be with a gray background, and in the hover, it will be #1c87c9.

When the first (a:link) and the second (a:visited) states have the same background color we can write just a.

Example of using the background-color property to style a link:

html> html> head> title>Title of the document title> style> a < background-color: #555555; > a:hover < background-color: #1c87c9; > a:active < background-color: #1c87c9; > style> head> body> a href="#">This is some link. a> body> html>

You can choose your preferable color with the Color Picker.

Practice Your Knowledge

a:active is a link

that the user has already visited that is not visited when the user mouses over it the moment it is clicked

Источник

56 CSS Link Hover Effects

Collection of hand-picked free HTML and CSS link effect code examples from Codepen, GitHub, and other resources with :hover and :active state. Update of May 2021 collection. Twelve new items.

Related Articles

Author

Links

Made with

About a code

Custom Animated Links with Psuedo Elements

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hover Effect #4

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hover Effect #5

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hover Effect #6

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hover Effect #7

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hover Effect #1

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hover Effect #2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Mouse-Out Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Link Split Hover Effect

The text is duplicated, masked with clip-path then psuedoelements and movements are animated with CSS transitions. The underscore is made with a linear gradient background image, but if you don’t plan to use a link like this over multiple lines of text, you could just use another pseudoelement.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Exploring Creative Link Hover Effects

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Fade out Other Links on Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Laser Revealed Title Link

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Displaying Link URLs

How to display the href attribute of a link next to the link text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Neat Hover Effects

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Simple CSS Line Hover Animations for Links

A couple of simple & subtle CSS-based line hover animations for links.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Link Hover Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Animated SVG Links

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Link Hover Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Variable Powered Underline Transition

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Underline Animation — Link

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Link Hover Interaction

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Link Hover Flash

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Underline Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Link Fill on Hover

Link hover effects that fill a link with an underline or line-through using CSS transitions and the clip-path property.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Underline Link Effect

Animated underline/border link effect. Edit transform-origin to change how where the animation starts. It’s currently set to left.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Half-transparent CurrentColor Link Underline

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Spring/Bounce Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Link Styling

Link styling exploration without classes.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Flag # links!

Broken link styles. Flag # links with CSS! Never forget a href=»#» placeholder again!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Link Effect

HTML and CSS link squiggle effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Link with Gradient Background

Link with gradient background on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Animated Font Weight On Hover

Author

Links

Made with

About the code

Multi-line Link

Multi-line link hover effect.

Author

Links

Made with

About the code

Link Arrow

Author

Links

Made with

About the code

Gradient Underline Animation

Using a css background gradient and css animation this allows the animation of a link underline to carry across multiple lines. This previously would be achieved using the :pseudo elements. However doing this over multiple lines proved tricky.

Author

Links

Made with

About the code

Cool Hover Effect With mix-blend-mode

This is cool because you don’t need to change the color of the link on :hover . The mix-blend-mode in the ::after will invert it for you.

Underline Hover

HTML and CSS underline hover effect.
Made by Elwin van den Hazel
July 12, 2017

Animate Underline Wavy

That cool wiggly underline that people like.
Made by David Darnes
July 10, 2017

Fancy Text-Shadow Link Underline

HTML and CSS fancy text-shadow link underline.
Made by Ryan
July 1, 2017

Follow Along Links

Hover on the links and it follows the cursor, highlighting the links as you go!
Made by Katherine Kato
June 23, 2017

Pure CSS Single Element Link Styles

Inspired by things that have seen from Medium and other peoples pens but with an added attempt at bringing in some animation. Currently limited to a link that is in total 10000px wide across all lines.
Made by Matthew Shields
June 24, 2017

Strikethrough Hover Effect

Hover effect for links. Use only one pseudo-element on link.
Made by Artyom
June 23, 2017

Jumping Link Hovers

Jumping link hovers with HTML and CSS.
Made by Bennett Feely
June 19, 2017

Arrowed Link

Arrowed link — circle on hover (cf Google home website).
Made by Alexandre Jolly
May 21, 2017

Author

Источник

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.

Источник