Fancy Hyperlinks Hover Effects CSS Tutorial For WordPress

Written by
Fabrizio Van Marciano
Posted on
October 6, 2021

In this video, you'll learn three simple fancy hyperlinks hover effects CSS that you can apply to your website design project. I'll be adding more in the near future, but in the meantime, enjoy these three.

Watch the video below to see me implement the CSS code into my dummy website. I use Oxygen Builder for WordPress, however, this tutorial is not dependent on Oxygen. So you can use any theme builder or theme template that you want.

In most cases, and if you're on WordPress, you can just go to Appearance > Customize > Additional CSS to add the CSS code below.

Why use fancy hyperlinks on your website?

Links help to connect all of your pages and content together. So, boring, uninspiring hyperlinks do not get noticed let alone get clicked on. When it comes to conversion design, making your text links stand out is crucial. But why just make them stand out when you can make them interesting to interact with?

Hyperlink states

The <a> element is used for links and can be used with a variety of states. Here is a list for your convenience

  • a:link – represents a normal state for a hyperlink
  • a:visited – this state is for a link that has been visited
  • a:hover – this is the state when a pointer is placed over the link
  • a:active – this is the state when a user clicks on a link
  • a:focus – when a user uses the tab key to navigate on a page, the links uses this state

Where will the CSS code below be applied?

The CSS below will apply to all of your links, so feel free to create your own custom classes to assign the hover link effects where you want them specifically.

If you're using Oxygen Builder, you can simply give your inner-content element inside of your global template a custom class.

Here is the video:

Now for the real magic, the CSS code for each of the hyperlinks hover effects. I've made some suggestions as to how you can customize them further.

Hyperlinks Hover Effect #1 - Gliding Underline

With this one, you can customize the color, height, background, and transition.

a {
	color: #fcb045;
  	display: inline-block;
}

a::after {
	content: '';
  	display: block;
  	width: 0;
  	height: 2px;
  	background: #fcb045;
  	transition: width .3s;
}

a:hover::after {
	width: 100%;
  	transition: width .3s;
}

Hyperlinks Hover Effect #2 - Highlighter Hover Effect

This is a pretty cool one, you can customize the border-bottom, box-shadow color, transition, and hover background color.

a {
    text-decoration: none;
    border-bottom: 2px solid #fcb045;
    box-shadow: inset 0 -2px 0 #fcb045;
    color: inherit;
    transition: background 0.1s cubic-bezier(.33,.66,.66,1);
}

a:hover {
    background: #fcb045;
}

Hyperlinks Hover Effect #3 - Thickening Underline Transition Effect

This is another cool one to try on your website. Here you can customize the color, background color, transition period, and hover:before height.

a {
	color: #fcb045;
  	position: relative;
}

a:before {
  	content: "";
  	position: absolute;
  	width: 100%;
  	height: 0;
  	bottom: 0;
  	left: 0;
  	background-color: #494949;
  	visibility: hidden;
  	transition: all 0.2s ease-in-out;
}

a:hover:before {
  	visibility: visible;
  	height: 3px;
}

So, there you have it, three cool links hover effects for you to use in your projects. If you enjoyed this video, consider subscribing for future videos. If you'd like to support my channel and website in any way, do visit my merchandise store for some cool merch and apparel.

Need a WordPress website designer?

If you need help with your website design, check out my services page here. Feel free to get in touch with me to discuss your ideas.

Recommended Posts

  1. Custom Styled Numbered List CSS Tutorial Using Oxygen Builder
  2. 6 Simple CTA Button Styles With Hover Effects For Your Website
Posted in

Are you ready to kickstart your web design project?

Let's work together to turn your website design and creative marketing ideas to life. Hit the 'Start Project' button to book your free 30-minute strategy consultation with me.
Copy link
Powered by Social Snap