Faire de jolies boutons de site web avec CSS
Fermé
joelxax
Messages postés
563
Date d'inscription
mardi 15 juillet 2008
Statut
Membre
Dernière intervention
14 avril 2011
-
Modifié par joelxax le 28/10/2010 à 22:30
Furixx - 13 févr. 2014 à 14:28
Furixx - 13 févr. 2014 à 14:28
11 réponses
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
29 oct. 2010 à 01:29
29 oct. 2010 à 01:29
SALUT
il y a longtemps que je n ai pas poster sur le forum , mais voila un exemple de bouton en CSS3 et RGBA
sinon voila un bon generateur
https://css-tricks.com/examples/ButtonMaker/
a+
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
https://css-tricks.com/examples/ButtonMaker/
a+
1 nov. 2010 à 13:57
1 nov. 2010 à 22:41
En effet, jolis boutons, marchent sous Firefox 3.6.12 mais pas sous Internet Explorer 8
13 févr. 2014 à 14:15
<img src="btnormal.jpg" name="btsurvol" onmouseover="btsurvol.src='tonboutonausurvol.jpg'" onmouseout="btsurvol.src='btnormal.jpg'"/>
Voila tu mes ça entre les balises <BODY> de ton code pour mois ça fonctionnent à merveille !