CSS: How to create buttons with reflected shine similar to iOS icons?

Question

I'm trying to style my HTML buttons using CSS, so that they have the reflected shine like the icons on iOS devices' home page. Apple does this to icons automatically as shown here. I need something similar to the shine in CSS.

Answer 1

Take a look at this fiddle.

Here's the code:

HTML:

<div class="icon">
    <div class="shine"></div>
</div>

And CSS:

.icon {
    width: 150px;
    height: 150px;
    border-radius: 30px;
    background: red;
    float: left;
    margin: 50px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
}
.shine {
    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#33ffffff',GradientType=0 ); /* IE6-9 */
    height: 90px;
    width: 150px;
    box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7);
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 100px 40px;
    border-bottom-left-radius: 100px 40px;
}

Answer 2

my example uses a background-color:red instead of an image, but just put any image as background in the #icon div and it should also work.

(btw I used this awesome site: http://www.colorzilla.com/gradient-editor/ for the gradients)

HTML:

<div class="icon">
    <div class="shine">
    </div>
</div>

CSS:

.icon {
    width:50px;
    height:50px;
    background-color: red;
    overflow: hidden;
    position: relative;
}
.shine {
    position: absolute;
    top: -70px;
    left: -25px;
    width:100px;
    height:100px;
    border-radius: 50px;

    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Chrome10+,Safari5.1+ */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 150%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1.5)), color-stop(100%,rgba(255,255,255,0))); /*     Chrome,Safari4+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* IE10+ */
    background: radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

Hope it works for you!