MEDBLOG : Actualités Geek Web 2.0 & Webdesign

Actualités Geek Web 2.0 & Webdesign

Tutorial CSS, création d’un bouton design

Ce tutorial va vous permettre de créer des boutons personnalisés pour vos formulaire ou autre.

Première étape :
Créer les différentes images composant le bouton.

bg_button_span.gif bg_button_p.gif bg_button_a.gif

Seconde étape :
Une fois votre bouton créer et découper il ne vous reste plus qu’à insérer le code CSS suivant dans votre page.

<style type="text/css">
<!--

.clear { 

   overflow: hidden;
   width: 100%;
}

a.button {

 background: transparent url('bg_button_a.gif') no-repeat scroll top right;
 color: #FFF;
 display: block;
 float: left;
 font: normal 12px arial, sans-serif;
 font-weight:bold;
 height: 34px;
 margin-right: 6px;
 padding-right: 18px;
 text-decoration: none;

}

a.button p {

 background: transparent url('bg_button_span.gif') no-repeat;
 display: block;
 margin:0;
 padding:0;

}

a.button span {

 background: transparent url('bg_button_p.gif') repeat;
 display: block;
 line-height: 24px;
 margin: 0 0 0 18px;
 padding: 5px 0 5px 0px;

}

a.button:active {    

 background-position: bottom right;
 color: #000;
 outline: none;

}

a.button:active p{

 background-position: bottom left;
 padding:0;
 margin:0px;

}

a.button:active span {

 background-position: bottom;
 margin: 0 0 0 18px;
 padding: 5px 0 5px 0px;  

}

-->
</style>

Troisième étape :
Appeler ou insérer le bouton dans votre page HTML par le biais de de la ligne de code suivante :

<a class="button" href="#" onclick="this.blur();"><p><span>Je suis le plus beau bouton du monde</span></p></a>

Cette petite manipulation CSS, va vous permettre d’avoir des boutons plus stylés que les boutons part défaut, je tiens juste a vous informer que ce ne sont pas des boutons de type formulaire (input) mais plutôt une personnalisation de la balise lien (A).

Résultat du tutorial :

AddThis Social Bookmark Button

10 commentaires, commentaire ou Trackback

  1. merci pour le tuto

  2. De rien Webister, je suis en train de préparer d’autre pour des futurs billet.

  3. Kabr

    ça avance dans le bon sens ton blog.

  4. Yesss man! Il est beau le bouton ;)

    Merci !

  5. <p>(block) tag can not be contained in a <a>(inline) tag

  6. Display : block et Display : inline permettent donc de passer d’une structure à l’autre, en modifiant le comportement d’un élément. L’exemple le plus courant est de vouloir donner une dimension et une image de fond à une balise pour en faire un bouton. Par défaut, est une balise Inline, il faut donc la passer en Block pour lui donner des dimensions et la sortir du texte courant.

  7. svp donnez moi ds exemplaires du bouton et des interfaces

  8. JP

    super tuto, cela fonctienne tres bien,
    cependant, j’ai un probleme d’affichage lorsque le texte du bouton est long et qu’il n’y a pas assez de place sur la ligne du navigateur.
    le bouton est affiché en 2 parties.
    Etant notive dans le css, quelqu’un aurait-il une idée ?
    merci

    ps le le reproduire, il faut de mettre plusieur boutons à la suite avec dedans des textes long.

  9. JM

    Bonjour et bravo pour ce tuto…

    J’ai juste un petit problème, je narrive pas à centrer ma “ligne” de boutons ; j’ai pourtant utiliser les balises “” puis “” mais ilsont à gauche toute…

    peut-on m’aider s’il vous plait ? Merci par avance à ceux qui vont essayer

    JM

Recevez les derniers articles par mail :

 

Recent Comments

  • Carmine
    Un nouveau logo pour Photoshop
    2021-03-16 20:40:09
  • Kidjo tv
    Scriblink - Le tableau blanc collaboratif en ligne !?
    2021-03-14 10:33:20
  • resilier abonnementorange
    ViewAt.org, Partage de photo panoramique
    2021-03-14 10:30:40
  • Boulanger.Com
    FaceInHole, Changer de corps
    2021-03-14 10:30:29
  • kidjo tv logicom
    SnagIt lance des plugins de capture d’écran
    2021-03-14 10:30:07
  • tv apk
    ImprimeBlog, Imprimer son blog en un livre
    2021-03-14 10:28:51
  • KIDJO TV
    Pulse ARTS : Le magazine des arts graphiques devient à 100% gratuit
    2021-03-14 10:26:30
  • Mamanmi.com
    Read It Later, Enregistrer est remettre la lecture de vos articles à plus tard
    2021-03-14 10:17:21
  • resiliation abonnement
    Vidéo sur les coulisses d’un studio photo
    2021-03-14 10:10:45
  • kidjo tv tiniloo
    Seam Carving les plugins sont disponible maintenant
    2021-03-14 10:10:17
  • supprimer orange
    Google Shared Stuff : bookmarking vu par Google
    2021-03-14 10:09:23
  • kidjo tv logicom
    Iconlet : Moteur de recherche d'icones
    2021-03-14 10:03:25
  • abonement
    Blackle, la version écolo de Google
    2021-03-14 10:03:14
  • abonnementjeu
    Verify Email, contrôle vos adresse e-mail
    2021-03-14 10:01:56
  • tv Abonnement
    SnagIt lance des plugins de capture d’écran
    2021-03-14 10:01:32

Par Albert Einstein

“La connaissance s'acquiert par l'expérience. Tout le reste n'est que de l'information.”

Feedburner RSS
Ajoute a Technorati Favoris