Création
d'entreprise
Posez votre question Signaler

Faire de jolies boutons de site web avec CSS

joelxax 591Messages postés 15 juillet 2008Date d'inscription 14 avril 2011Dernière intervention - Dernière réponse le 13 oct. 2011 à 15:15
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
Lire la suite 

Faire de jolies boutons de site web avec CSS »

12 réponses
Réponse
+3
moins plus
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+
LelLex- 1 nov. 2010 à 13:57
Ça fait beaucoup de code, et souvent, pas interpréter par tous les navigateurs pour un simple bouton "web 2.0" .! ;-)
Busyspider- 1 nov. 2010 à 22:41
Bonsoir,

En effet, jolis boutons, marchent sous Firefox 3.6.12 mais pas sous Internet Explorer 8
Ajouter un commentaire
Réponse
+0
moins plus
Tu as un exemple de code CSS qui donne un jolie bouton ? Ou un bon lien qui explique le truc.
Merci
Ajouter un commentaire
Réponse
+0
moins plus
Merci beaucoup c'est exactement ce que je cherchais. MAis comme tu as mélanger le CSS et le HTML je suis un peut perdu, mais sa peut aller quand même
merci
Ajouter un commentaire
Réponse
+0
moins plus
Tout ce code pour de simple bouton comme comment ça marche !

Compliquez-vous pas la vie, écrivez ce qui est inscrit dans le bouton en html dans une id et ciblé le en css, on met le background du bouton, applique et le tour est jouer, pourquoi écrire 1000 lignes de code quand on peu résumer en 5..

Merci
Signature non conforme ==> Supprimée
Modération CCM
skrosoft - 13 oct. 2011 à 15:15
Un bon développeur est un développeur qui programme des codes sources REUTILISABLE ! L'expérience de l'apprendra ...
Ajouter un commentaire
Réponse
-1
moins plus
Je te conseil de regarder des pages webs, et regarder leur bouton qui t'intéresse, après tu peux faire un style proche avec du CSS tout cours pas du CSS3.
C'est simple après débrouille toi pour faire quelques chose de sympa à regardé ;).
Ajouter un commentaire
Ce document intitulé « Faire de jolies boutons de site web avec CSS » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?