Button shine/glow with CSS3

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 g开发者_开发技巧low image?!

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

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/

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;
}

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>

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%
);

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.