Bouton CSS

Openweb.eu.org > Articles  > Bouton CSS

Abstract

Pour créer un bouton changeant d’aspect au passage de la souris, on peut utiliser les styles légers et accessibles.

Article

Pour créer un bouton changeant d'aspect au passage de la souris, nombreux sont les sites utilisant des javascripts, ou du flash, inaccessibles et gourmands en bande passante. Ces méthodes peuvent être très avantageusement remplacées par les styles qui ne présentent pas ces inconvénients.

Les techniques décrites ci-après fonctionnent avec les navigateurs modernes (MSIE 5.x, Netscape 6 et 7, Mozilla 1.x, Opéra 7). Avec Opéra 5.x et 6.x les images de fond ne seront pas chargées.

Document annexe : page de test.

Bouton simple

Ce premier exemple permet de créer un bouton de navigation dont le fond sera agrémenté d'une image lors du passage de la souris.

illustration de l'effet :hover sur un bouton css simple

Les caractéristiques communes de l'aspect du lien sont déclarées dans a.bouton, l'effet de changement de couleur et d'image de fond sont indiquées ensuite à l'aide de la pseudo classe :hover. A noter que cette image peut-être fixe ou animée.

source XHTML

<p>
  <a href="/articles/bouton_css/#" class="bouton">Retour</a>
</p>

Source CSS

a.bouton {
  color: white;
  background-color: #000080;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
}
a.bouton:hover {
  background-color: #6495ED;
  background-image: url(aqua.jpg);
}

Tester le résultat (bouton simple).

On peut aussi compléter l'aspect du bouton à l'aide de a.bouton:active pour l'instant du click et a.bouton:visited pour son aspect après visite de la page liée. Attention : veillez à mettre le style a.bouton:hover en fin de code si vous voulez que celui-ci reste actif même après l'activation du bouton !

Bouton en relief

Pour un effet de relief d'un bouton qui s'enfonce au passage de la souris, on rajoutera des attributs de style de bordures : outset pour en effet relief vers l'extérieur et inset pour un effet relief inverse.

bouton en relief qui semble s'enfoncer au passage de la souris

source CSS

a.bouton-relief {
  color: white;
  background-color: #000080;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  border: 2px outset #c0c0c0;
}
a.bouton-relief:hover {
  background-color: #6495ED;
  background-image: url(aqua.jpg);
  border: 2px inset #c0c0c0;
}

Tester le résultat (bouton en relief).

« Boutonnière » verticale

Les techniques précédentes sont adaptées à un bouton isolé dont la taille s'adapte à la longueur du texte. Mais si l'on veut faire un menu vertical, on cherche en général à faire des boutons de même taille.

menu en bouton css

Ceci se fait sans difficulté grâce à l'attribut display:block, qui permet de modifier le comportement des balises a (normalement « inline ») et ainsi de produire un retour à la ligne automatique à chaque lien et de pouvoir leur attribuer une taille précise.

source XHTML

<p>
  <a href="/articles/bouton_css/#" class="vertical">Sommaire</a>
  <a href="/articles/bouton_css/#" class="vertical">Bla bla</a>
  <a href="/articles/bouton_css/#" class="vertical">Retour</a>
</p>

source CSS

a.vertical {
  color: white;
  background-color: #000080;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  border: 2px outset #c0c0c0;
  display: block;
  width: 100px;
}
a.vertical:hover {
  background-color: #6495ED;
  background-image: url(aqua.jpg);
  border: 2px inset #c0c0c0;
}

Variante

Pour éviter de marquer à chaque lien class="vertical", on peut coder comme ceci :

source XHTML
<div class="vertical">
  <p>
    <a href="/articles/bouton_css/#">Sommaire</a>
    <a href="/articles/bouton_css/#">Bla bla</a>
    <a href="/articles/bouton_css/#">Retour</a>
  </p>
</div>
source CSS
.vertical a {
  color: white;
  background-color: #000080;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  border: 2px outset #c0c0c0;
  display: block;
  width: 100px;
}
.vertical a:hover {
  background-color: #6495ED;
  background-image: url(aqua.jpg);
  border: 2px inset #c0c0c0;
}

Tester le résultat (bouton en relief, variante).

À propos de cet article

Vos commentaires

  • Le 6 novembre 2010 à 16:47

    Bonjour,

    J’ai trouvé l’article très intéressant. En revanche, si l’on veut utiliser cette technique pour un bouton "Submit" de formulaire, comment fait-on ?

    Merci de votre réponse.

  • OLIPHAN Le 29 novembre 2010 à 04:58 En réponse à : Anonyme

    dans css

    #submit
    color : #b3000f ;
    text-align : center ;
    font-size : 12px ;
    font-weight : bold ;
    background :#FFFFFF ;
    width : 160px ;

    /* Defini le changement lors du passage de la souris sur le bouton du sous menu */
    #submit2
    color : #FFFFFF ;
    text-align : center ;
    font-size : 12px ;
    font-weight : bold ;
    background-color :#b3000f ;
    width : 160px ;

    dans page html (je suis obligé d’enlever l’accolade de input pour afficher le code du bouton, n’oublier pas de la remettre...)

    input id="submit" type="submit" onmouseout="id=’submit’" onmouseover="id=’submit2’" value="Créer"/>

  • OLIPHAN Le 29 novembre 2010 à 05:01

    dans css

    #submit
    color : #b3000f ;
    text-align : center ;
    font-size : 12px ;
    font-weight : bold ;
    background :#FFFFFF ;
    width : 160px ;
    /* Defini le changement lors du passage de la souris sur le bouton du sous menu */
    #submit2
    color : #FFFFFF ;
    text-align : center ;
    font-size : 12px ;
    font-weight : bold ;
    background-color :#b3000f ;
    width : 160px ;

    dans page html (je suis obligé d’enlever l’accolade de input pour afficher le code du bouton, n’oublier pas de la remettre...)

    input id="submit" type="submit" onmouseout="id=’submit’" onmouseover="id=’submit2’" value="Créer"/>

  • OLIPHAN Le 29 novembre 2010 à 05:06

    dans css

    #submit
    color : #b3000f ;
    text-align : center ;
    font-size : 12px ;
    font-weight : bold ;
    background :#FFFFFF ;
    width : 160px ;
    /* Defini le changement lors du passage de la souris sur le bouton du sous menu */
    #submit2
    color : #FFFFFF ;
    text-align : center ;
    font-size : 12px ;
    font-weight : bold ;
    background-color :#b3000f ;
    width : 160px ;

    dans page html (je suis obligé d’enlever l’accolade de input pour afficher le code du bouton, n’oublier pas de la remettre...)

    input id="submit" type="submit" onmouseout="id=’submit’" onmouseover="id=’submit2’" value="Créer"/>

  • nikiweb Le 16 mai 2011 à 22:26

    Un grand merci pour ces explications claires, détaillées et très pratiques. L’article a beau dater de 2003, il est encore parfaitement d’actualité. Nous nous sommes d’ailleurs largement reposé dessus pour la mise en forme des boutons sur notre site de comparateur de mandataires automobile. Merci !

  • adolphe Le 12 décembre 2011 à 19:03

    Pratiquement excellent !! Pas autre mot qu’excellent !!

  • ced Le 23 décembre 2011 à 19:32

    bonjour et merci pouèr ce tuto.
    je cherche a faire également un menu vertical mais uniquement pour des images ( le texte y est inclus) je n’y arrive absolument pas...

  • Georges Le 2 novembre 2012 à 22:57

    Bonjour,
    Totalement débutant je me demande ce que l’on fait du code CSS ?
    Merci
    Bien amicalement

  • Monique Le 2 novembre 2012 à 23:07

    Bonjour Georges,

    Impossible de répondre en quelques mots, je vous invite donc à découvrir CSS Débutant, le site de l’auteure de cet article.

    Amicalement,
    Monique

  • Pascale Lambert Charreteur Le 3 novembre 2012 à 10:48

    Bonjour,

    Alors, oui c’est peut-être plus simple d’aller directement à la source où toutes les explications détaillées sont données. Cela dit, pour faire court, on peut enregistrer les styles à 3 endroits différents :

    • au sein du code (à n’utiliser qu’exceptionnellement) grâce à l’attribut style
    • entre les balises en-tête
    • et surtout dans une feuille de style externe (LA solution à privilégier)

    Bonne continuation.

  • grisbi Le 31 janvier 2013 à 20:54

    personnellement j’ai bien cette interface dépouillée aller à l’essentiel le contenu surtout
    puis un temps de chargement tres rapide
    enfin chacun son truc ya qu’a voir google une interface ....simple mais efficace

    a++

  • Jean Philippe Le 3 avril 2015 à 00:19

    Bonjour,
    J’ai crée 2 boutonnière verticales et j’aimerais les mettre cote à cote sur la meme ligne.

    Comment faire.

    Cordialement.

  • rebbahi Le 9 octobre 2016 à 06:27

    Bonjour,

    Peux tu m’aider stp,

    Je viens de créer un sous menu horizontal sur joomla 2.5 (beez_20) mais il y a toujours un décalage entre le menu et le sous menu.

    voilà le code,

    #header ul.menu

    /* top:62px ; */
    top:5em ;

    padding : 0px 0px 0px 0 ;
    background :#e0e0e0 url(../images/personal/ecke.gif) top left repeat-x ;
    border:0 ;
    text-align:left ;
    left:0px ;
    display:block ;
    margin:0px 10px 0 10px ;
    border-top:solid 1px #ddd ;

    #header ul.menu li
    border:0 ; margin:0 !important ;
    #header ul.menu li a:link,
    #header ul.menu li a:visited

    color :#333 ;
    border:0 ;
    border-right:solid 1px #ddd ;
    margin:0px 0 0 0 ;
    padding:12px 15px ;
    position:relative ;
    background : #e0e0e0 url(../images/personal/ecke.gif) repeat-x top left ;
    display:inline-block


    #nav ul.menu font-size : 20px ;
    #header ul.menu li a:hover,
    #header ul.menu li a:active,
    #header ul.menu li a:focus

    background :#0d4c89 ;
    color :#fff ;

    #header ul li.active a:link,
    #header ul li.active a:visited

    color :#FF0000 ;
    background:url(../images/personal/navi_active.png) ;
    text-shadow : 1px 1px 1px #000 ;

    #header ul.skiplinks

    width:100% ;
    text-align:left ;
    background:none ;
    z-index:20000 ;
    top:0 ;
    display:inline ;
    padding:0

    #header ul.skiplinks li a.u2:active,
    #header ul.skiplinks li a.u2:focus


    background :#095197 !important ;
    color :#fff !important ;
    border:solid 1px ;
    top:0 !important ;
    z-index:10000 ;
    right:auto ;
    left:0 !important ;
    display:block

    /* ++++++++++++++ fontsize ++++++++++++++ */

    #fontsize

    display:inline ;

    #fontsize p a:link,
    #fontsize p a:visited

    color :#222 ;
    border-right:solid 1px #ccc

    #fontsize p a.larger,
    #fontsize p a.reset,
    #fontsize p a.smaller

    padding-left:5px ;
    padding-right:5px ;
    text-decoration:none ;
    margin:0 ;

    #fontsize p a:hover,
    #fontsize p a:active,
    #fontsize p a:focus

    background :#095197 !important ;
    color :#fff

    #fontsize h5

    color :#222 ;
    font-weight:bold

    /* ++++++++++++++ search ++++++++++++++ */

Vos commentaires

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom