CSS :hover 'shine effect' (ver 3)

Uses CSS multiple backgrounds, background-size, gradients, and transitions to create a 'shine effect' when hovering over a button

by Jens Kühn

HTML

<div class="container">
    <a href="http://twitter.com/necolas" class="uibutton">Download</a>
</div>

<p>Shine effect using semantic HTML and CSS3 backgrounds by <a href="http://nicolasgallagher.com">Nicolas Gallagher</a>.</p>

CSS

html,
body {padding:0; margin:0; line-height: 1.4;}

/* Links */
a {color:#858e98}
a:hover {color:#555}

body {
    background:#ccc;
}

body p {
    width:250px;
    margin:0 auto 5px;
    font:11px sans-serif;
    text-align:center;
    color:#858e98;
}

.container {
    position:relative;
    width:225px;
    height:52px;
    padding:20px 10px 0;
    margin:100px auto 10px;
    text-align:center;
    background:rgba(255, 255, 255, 0.7);
    -moz-border-radius:5px;
    border-radius:5px;
  
}

.uibutton {
    display:inline-block;
    padding:5px 10px;
    color:#fff;
    
    background:#65a9d7;
    background-repeat:no-repeat;
    background-image:-webkit-linear-gradient(
        top left,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.2) 37%,
        rgba(255, 255, 255, 0.8) 45%,
        rgba(255, 255, 255, 0.0) 50%
    ),
    -webkit-linear-gradient(
        #3e779d, #65a9d7
    );
    
    background-position:-100px -100px, 0 0;
         background-size:250% 250%, 100% 100%;
    -webkit-transition:background-position 0s ease;
}

.uibutton:hover{
    color:#fff;
    background-position:0 0, 0 0;
            transition-duration:0.5s;
}

JavaScript

/*
 * NOTES:
 *
 * CSS experiment using multiple backgrounds, background-size,
 * and transitions.
 *
 */