Faire de jolies boutons de site web avec CSS
joelxax
Messages postés
563
Date d'inscription
Statut
Membre
Dernière intervention
-
Furixx -
Furixx -
Salut a tous.
Pour mon site, j'aimerais faire de jolie boutons comme ceux qui sont sur commentcamarche (">>Posez votre question", "J'ai une réponse" "Liste des messages"...). Je sais que c'est possible avec CSS, mais je ne sait pas coment m'y prendre.
Merci pour votre aide
Qui fait le malin tombe dans le ravin
A quoi sert Internet Explorer ? >>> A télécharger Mozilla Firefox
Pour mon site, j'aimerais faire de jolie boutons comme ceux qui sont sur commentcamarche (">>Posez votre question", "J'ai une réponse" "Liste des messages"...). Je sais que c'est possible avec CSS, mais je ne sait pas coment m'y prendre.
Merci pour votre aide
Qui fait le malin tombe dans le ravin
A quoi sert Internet Explorer ? >>> A télécharger Mozilla Firefox
A voir également:
- Joli bouton css
- Bouton shift pc ✓ - Forum Windows
- Bouton on off ✓ - Forum Loisirs / Divertissements
- Quel est la touche shift sur le clavier ✓ - Forum Jeux vidéo
- Diagnostic bouton photo - Accueil - Outils
- Bouton reinitialisation pc - Guide
11 réponses
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+
En effet, jolis boutons, marchent sous Firefox 3.6.12 mais pas sous Internet Explorer 8
<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 !