Hover shine effect with pure CSS
9 years ago
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:
1 | <div class="myButton">Click Me</div> |
And the CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | /* 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; } |