In alle browsers werkt deze glossy button procedure. Er is wel gebruik gemaakt van progressive enhancement. In sommige IE browsers werkt het nét even wat minder dan in alle overige browsers, maar niemand zal dat in de gaten hebben. Om deze glimmende knoppen op jouw webpagina te plaatsen moet je de css (en de IE-regels) in de head- en de html regels in de body-sectie van jouw pagina plaatsen.
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<![endif]-->
<style type="text/css" media="screen">
.positie_knoppen{
margin:20px 0 50px 100px;}
.separeer{
display:none;
font-size:12px}
.glossy_button a{
color:#dddddd;
background:transparent;
z-index:5}
.glossy_button a:hover{
color:#E5CC92;
background:transparent;
z-index:5}
.glossy_button{
color:#fff;
background:#3C8400;
font-size:20px;
width:160px;
height:26px;
line-height:20px;
padding:5px 7px 3px 3px;
-webkit-border-radius:16px;
-moz-border-radius:16px;
border-radius:16px;
border:2px solid #ccc;
position:relative;
font-weight:bold;
text-shadow:rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align:center;
white-space:nowrap;
overflow:hidden}
.schaduw{
z-index:1;
background-color:rgba(60, 132, 0, 0.8);
background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 0, 0.8)), to(rgba(108, 191, 0, .9)));
border-top-color:#8BA200;
border-right-color:#589000;
border-bottom-color:#4F9300;
border-left-color:#768F00;
-webkit-box-shadow:rgba(66,160,0,0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66,160,0,0.5) 0px 10px 16px;
box-shadow: rgba(66, 160,0,0.5) 0px 10px 16px}
.glans{
z-index:-1;
position:absolute;
top:0;
left:5px;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
height:1px;
width:160px;
padding:8px 0;
background-color:rgba(255, 255, 255, 0.25);
background-image:-webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)))}
.glossy_button:hover{color:#E5CC92;background:#004400;z-index:4}
</style>
<!--[if lt IE 9]>
<style type="text/css" media="screen">
.positie_knoppen{
margin:-20px 0 50px 100px}
.glossy_button{
position:absolute;
border-radius:16px;
behavior:url(rond.htc)}
.glans{
z-index:-1;
color:inherit;
background:#509549;
position:absolute;
top:0;
left:5px;
border-radius:8px;
behavior:url(rond.htc)}
.separeer{
display:block}
.glossy_button:hover{
color:#E5CC92;
background:#004400;
z-index:4}
</style>
<![endif]-->
<div class="positie_knoppen">
<p class="separeer"> </p>
<div class="glossy_button schaduw">
<div class="glans"></div>
<a href="http://kompoos.nl/css/text-effects/glossy-buttons.html">Glossy Button</a>
</div>
<p class="separeer"> </p>
<div class="glossy_button schaduw">
<div class="glans"></div>
<a href="http://kompoos.nl/css/text-effects/glossy-buttons.html">Geen Plaatjes</a>
</div>
<p class="separeer"> </p>
<div class="glossy_button schaduw">
<div class="glans"></div>
<a href="http://kompoos.nl/css/text-effects/glossy-buttons.html">Cross Browser</a>
</div>
<p class="separeer"> </p>
</div>