Comment faire des boutons sexy via css

31/07/2007
Web Développement et Design Allez aux commentaires

Vous aussi vous voulez des boutons sexy pour votre site/blog ?

Et bien grâce à Alex Griffioen, vous allez enfin pouvoir réaliser votre rêve et rivaliser avec les webdesigneur chevronnés !
Sa technique permet de garder de beau boutons, même avec une largeur variable !

En utilisant les 2 images suivantes (ou vos propres images):

bg_button_span bg_button_a

Et ces règles css:

.clear { /* generic container (i.e. div) for floating buttons */
     overflow: hidden;
     width: 100%;
}
a.button {
     background: transparent url('bg_button_a.gif') no-repeat scroll top right;
     color: #444;
     display: block;
     float: left;
     font: normal 12px arial, sans-serif;
     height: 24px;
     margin-right: 6px;
     padding-right: 18px; /* sliding doors padding */
     text-decoration: none;
}
a.button span {
     background: transparent url('bg_button_span.gif') no-repeat;
     display: block;
     line-height: 14px;
     padding: 5px 0 5px 18px;
}
a.button:active {
     background-position: bottom right;
     color: #000;
     outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
     background-position: bottom left;
     padding: 6px 0 4px 18px; /* push text down 1px */
}

Pour l'utilisation dans votre code html:

<a class="button" href="#" onclick="this.blur();"><span>Mon beau bouton !</span></a>

sexy_buttons_2

Via Youmos

-----

Articles relatifs

  1. MedBlog
    26/08/2007 à 15:24 | #1
    Répondre | Citer

    je crois qu’il y a un petit oublie dans votre appel HTML !!

    code d’origine :
    <a class= »button » href= »# » onclick= »this.blur(); »>Mon beau bouton !</a>

    code corrigé :
    <a class= »button » href= »# » onclick= »this.blur(); »><span>Mon beau bouton !</span></a>

  2. k-ny
    05/09/2007 à 09:38 | #2
    Répondre | Citer

    Un grand merci Medblog pour ta vigilance !

  3. Cyrille
    09/10/2007 à 01:22 | #3
    Répondre | Citer

    Merci k-ny

    J’aime beaucoup le rendu

    Cyrille

    Ps: ti soucis de mise en page dans le rendu
    http:**//img237.imageshack.us/img237/4778/sanstitreqd7.jpg

  4. Zaza
    18/04/2008 à 07:31 | #4
    Répondre | Citer

    Cet effet est tout aussi bien faisable avec du CSS seulement.

    Il suffit de changer le background-image de votre a:active.

  5. k-ny
    18/04/2008 à 12:07 | #5
    Répondre | Citer

    @Zaza

    Et bien c’est ce qu’on fait non ?