SALUT
il y a longtemps que je n ai pas poster sur le forum , mais voila un exemple de bouton en CSS3 et RGBA
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
/*<![CDATA[*/
#sombre{
background-color:#333;
border:1px solid #000;
padding:10px;
margin-top:20px;}
li{
list-style:none;
padding-top:10px;
padding-bottom:10px;}
.bouton, .bouton:visited {
background: #222 url(overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer
}
.bouton:hover{
background-color: #111; color: #fff;
}
.bouton:active{
top: 1px;
}
.petit.bouton, .petit.bouton:visited{
font-size: 11px
}
.bouton, .bouton:visited,.medium.bouton, .medium.bouton:visited{
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.bouton, .large.bouton:visited{
font-size: 14px;
padding: 8px 14px 9px;
}
.super.bouton, .super.bouton:visited{
font-size: 34px;
padding: 8px 14px 9px;
}
.rose.bouton, .rose.bouton:visited{
background-color: #e22092;
}
.rose.bouton:hover{
background-color: #c81e82;
}
.vert.bouton, .vert.bouton:visited{
background-color: #91bd09;
}
.vert.bouton:hover{
background-color: #749a02;
}
.rouge.bouton, .rouge.bouton:visited{
background-color: #e62727;
}
.rouge.bouton:hover{
background-color: #cf2525;
}
.orange.bouton, .orange.bouton:visited{
background-color: #ff5c00;
}
.orange.bouton:hover{
background-color: #d45500;
}
.bleu.bouton, .bleu.bouton:visited{
background-color: #2981e4;
}
.bleu.bouton:hover{
background-color: #2575cf;
}
.jaune.bouton, .jaune.bouton:visited{
background-color: #ffb515;
}
.jaune.bouton:hover{
background-color: #fc9200;
}
/*]]>*/
</style>
</head>
<body>
<div id="sombre">
<ul>
<li>
<a class="super bouton rose">bouton rose</a> <a class="large bouton vert">bouton vert</a>
</li>
<li>
<a class="medium bouton bleu">bouton bleu</a> <a class="super bouton rouge">bouton rouge</a>
</li>
<li>
<a class="petit bouton orange">bouton Orange</a> <a class="medium bouton jaune">bouton jaune</a>
</li>
</ul>
</div>
</body>
</html>
sinon voila un bon generateur
http://css-tricks.com/examples/ButtonMaker/#
a+
En effet, jolis boutons, marchent sous Firefox 3.6.12 mais pas sous Internet Explorer 8