Skip to content

Instantly share code, notes, and snippets.

@blbwd blbwd/index.html
Created Sep 9, 2015

Embed
What would you like to do?
Transitional mouse hover effect in CSS
<div id="effect">
<p><a href="#"><span>Normal text effect</span></a></p>
</div>
a, a:visited {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#effect {
width:200px;
height:96px;
}
#effect p {
color:#fff;
letter-spacing:-1px;
text-align:center;
font-size:12px;
line-height:15px;
margin:30px 0 0 0;
}
#effect p span {
display:block;
font-weight:700;
font-size:17px;
letter-spacing:0px;
}
#effect p a,
#effect p a:visited {
background:#00adef;
padding:10px 0;
display:block;
text-decoration:none;
color:#fff;
}
#effect p a:hover {
background:#ef004d;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.