This is a simple example of a mouse-over shine effect I created using purely CSS. It uses a CSS generated element and CSS3 transitions to animate the effect. See the comments in the markup below for further explanation of how it works.
Live demo:
Simple HTML markup:
[cc lang=”html”]
[/cc]
And the CSS:
[cc lang=”css”]
/* normal button style */
.myButton {
width: 110px;
height: 30px;
background-color:#0099cc;
text-align: center;
color: #FFF;
position: relative;
}
/* button hover style if required */
.myButton:hover {
}
/* generated element for shine effect.
* normal state is semi-transparent
* white but with zero width. Set no
* transition here for no mouse-leave
* animations. Otherwise the effect
* will play in reverse when your mouse
* leaves the element
*/
.myButton:after {
content: “”;
position: absolute;
top: 0px;
left: 0px;
width: 0%;
height: 100%;
background-color: rgba(255,255,255,0.4);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
/* on hover we animate the width to
* 100% and opacity to 0 so the element
* grows and fades out
*/
.myButton:hover:after {
width: 120%;
background-color: rgba(255,255,255,0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
[/cc]
Leave a Reply
You must be logged in to post a comment.