I wanted to add a little spice to the hover states of my navigation and found a nice technique to animate a gradient, giving the impression that a background color will fill from left to right.
First, on the hyperlink, specify the following style declarations:
- background: linear-gradient(to left, {original color} 50%, {fill color}, 50%); // specify the gradient
- background-size: 200% 100%; // set the background size to 2 times larger than the elements width
- background-position: right bottom; // default to the original background color
- transition: background, .25s, ease-out; // specify the background as the property for the transition, along with the effect duration and speed curve
For the hover state, specify the following style declaration:
- background-position: left bottom;
Putting it altogether:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
.encapsulated li{ | |
font-size: 16px; | |
text-transform: uppercase; | |
margin: 0; | |
letter-spacing: .04em; | |
line-height: 72px; | |
list-style-type: none; | |
border-bottom: solid 1px #0c445d; | |
} | |
.encapsulated a{ | |
display: block; | |
color: #1fb9ef; | |
padding: 0 0.846em; | |
background: linear-gradient(to left, #093447 50%, #072634 50%); | |
background-size: 200% 100%; | |
background-position: right bottom; | |
transition: background .25s ease-out; | |
} | |
.encapsulated a:hover{ | |
background-position: left bottom; | |
} | |
</style> | |
<div class="encapsulated"> | |
<ul> | |
<li><a href="/">Home</a></li> | |
<li><a href="work">Work</a><li> | |
<li><a href="blog">Blog</a></li> | |
<li><a href="contact">Contact</a></li> | |
</ul> | |
</div> |