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

The code

Simple HTML markup:

<button class="shiney">Click Me</button>

And the CSS:

/* normal button style */
.shiney {
  text-align: center;
  color: #FFF;
  position: relative;
  -webkit-appearance: none;
  border: none;
  overflow: hidden;

/* button hover style if required */
.shiney: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
.shiney:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0%;
  height: 100%;
  background-color: rgba(255,255,255,0.4);
  transition: none;

/* on hover we animate the width to
* 100% and opacity to 0 so the element
* grows and fades out
.shiney:hover:after {
  width: 120%;
  background-color: rgba(255,255,255,0);
  transition: all 0.3s ease-out;