Button shine/glow with CSS3

Problem

I have a navigation menu that I'm trying to recreate using only CSS3 and HTML. The design calls for a shine/glow on the currently selected menu button as per the "home" button on the attached pic. Is that effect possible using just code or will I need to use the glow image?! alt text

Notice the shine and white line is most visible towards the center of the button and then fades towards the edges.

Problem courtesy of: robzolkos

Solution

CSS3's radial gradients let you achieve a similar effect, although using a CSS background image may be easier for pixel-perfect adjustments. Specifically, CSS3's gradients are linear, even the radial ones.

I've constructed a small example using Firefox's radial gradients (support for Webkit will require quite different code): http://jsfiddle.net/rxMf6/

Example of button with radial gradient

HTML:

<div class="highlighted-button">
    <div class="highlight"></div>
    Button
</div>

CSS:

.highlighted-button {
    background: #000;
    color: #fff;
    font: bold 0.8em Arial, sans-serif;
    padding-bottom: 0.9em;
    text-align: center;
    text-transform: uppercase;
    width: 8em;
}

.highlight {
    background: -moz-radial-gradient(center top, ellipse farthest-side,
                                     #fff 0%, #000 100%);
    height: 0.5em;
    margin-bottom: 0.4em;
}
Solution courtesy of: ide

Discussion

yes,that's shine is possible in css3.You adjust gradient as per your requirement.you us filter for IE. i hope this example help's you.

.menu {
    float: left;
    margin: 10px 10px 10px 0;
    background: #000;
    width: 700px;
}
.menu ul {
    margin: 15px 0 15px 5px;
}
.menu ul li {
    display: inline;
    list-style: none;
    font-size: 12px;
    font-family: arial;
    color: #fff;
    font-weight: normal;
}
.menu ul li:before {
    display: inline;
    content: "/";
}
.menu ul li:first-child:before {
    content: " ";
    height:45px;
}
.menu ul li a {
    margin: 0 15px 0 15px;
    color: #fff;
    text-decoration: none;
    padding:17px 30px 16px 30px;;
}
.menu ul li a:hover {
    border-top:1px solid rgba(255, 255, 255, 0.4);
    text-decoration: underline;
    color: #fff;
    padding:17px 30px 16px 30px;
    background: -moz-radial-gradient(center -5px 45deg, ellipse farthest-corner, rgb(255, 255, 255)0%, rgba(0, 0, 0, 0.2)70%) repeat #000;
    background: -webkit-gradient(radial, 50% 0, 0, 50% 0,50, from(rgba(255, 255, 255, 0.9)), to(#000));

}



    <nav>
                <div class="menu">
                    <ul>
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">WHAT IS THIS?</a></li>
                        <li><a href="#">SWEAR DICTIONARY</a></li>
                    </ul>
                </div>
    </nav>
Discussion courtesy of: sandeep

Here is a similar CSS3 gradient. You can change the colors and get your desired look. I don't know if it is exactly like what you wanted though. It doesn't do a rounded look just a straight gradient.

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.32, rgb(14,15,14)),
color-stop(0.7, rgb(0,0,0)),
color-stop(0.85, rgb(201,201,201))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(14,15,14) 32%,
rgb(0,0,0) 70%,
rgb(201,201,201) 85%
);
Discussion courtesy of: the_

You will need an image. There is really no way to achieve this effect with just code. Though most browsers can be handled with the use of CSS3 box-shadow or gradients, Internet Explorer 8, and partially IE 9 will have issues. To give proper cross-browsers support, you will have to use images to achieve the desired effect.

The reason I say you will need an image is very well may have to include additional markup and hacky workarounds to achieve the effect. This is not desirable and could cause conflicts in trying to implement the CSS3 version as well.

Discussion courtesy of: Glenn Nelson

This recipe can be found in it's original form on Stack Over Flow.