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 stackmanoz

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;
    -webkit-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);
}

.uibutton {
    display:inline-block;
    padding:5px 10px;
    border-top:1px solid #96d1f8;
    color:#fff;
    border-radius:8px;
    box-shadow:rgba(0,0,0,1) 0 1px 0;
    text-shadow:rgba(0,0,0,.4) 0 1px 0;
    text-decoration:none;
    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-image:-moz-linear-gradient(
        0 0,
        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%
    ),
    -moz-linear-gradient(
        #3e779d, #65a9d7
    );    
    background-image:-o-linear-gradient(
        0 0,
        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%
    ),
    -o-linear-gradient(
        #3e779d, #65a9d7
    );
    background-image:linear-gradient(
        0 0,
        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%
    ),
   ...

JavaScript

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