Hover Effects: Text Links

Written by: Becky Aiken | IANR Media

1. Create your link

Create your link in the WYSIWYG editor in UNLcms

Need help making a link?

2. Add a class to your link

This way, your styles will only target elements with that class.

Add a class to your link in the HTML editor

3. Style your link in its default (non-hovered) state

.wdn-main p a.styled-link {

The highlighted code ensures that your styles will override WDN default styles for links inside of paragraph tags.

border: 0;

This removes the dotted underline on the link

font-weight: bold;

This makes the link text bold

color: #d00000;

This ensures that your link stays red even if the user has visited the link before.

Put it all together:

.wdn-main p a.styled-link {
border: 0;
font-weight: bold;
color: #d00000;
}

4. Style your link in its hover state

.wdn-main p a.styled-link:hover {

The highlighted code makes your styles target the link when it's being hovered over.

color: #109dc0;

This makes the link turn blue when you hover

Put it all together:

.wdn-main p a.styled-link:hover {
color: #109dc0;
}

5. Add your styles to your site's CSS

Inside of UNLcms, go to the Appearance section of your site and click "Settings."

The appearance page with the settings button in UNLcms

Paste your styles into the CSS box at the top, then scroll down to the bottom of the page and hit "Save Configuration".

The appearance settings page where you place your CSS

The finished product


I'm a link - hover over me!


The HTML


<p><a href="http://your-link-here.com" class="styled-link">I'm a link - hover over me!</a></p>

The CSS


.wdn-main p a.styled-link {
border: 0;
font-weight: bold;
color: #d00000;
}

.wdn-main p a.styled-link:hover {
color: #109dc0;
}