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

Répondre á “Tutorial CSS, création d’un bouton design”

Recevez les derniers articles par mail :

 

Recent Comments

  • filz 4mm kaufen
    Algérie télécoms lance un servie EVDO sur le nom Athir testé et approuvé
    2018-09-18 14:52:13
  • source
    Fontpark, Faites de l’art avec l’alphabet japonais
    2018-09-17 11:51:06
  • compraventa relojes de lujo
    Apple prépare une version 10.4.11 de Mac OS X
    2018-09-09 03:25:34
  • Katherin
    Verify Email, contrôle vos adresse e-mail
    2018-09-01 05:34:08
  • ikan hias
    Hotspot Shield, Accédez à Pandora & Hulu hors des USA
    2018-08-31 18:05:00
  • vender relojes
    Picoshot, générer des Thumbnails de sites
    2018-08-29 09:30:16
  • propecia
    Fontpark, Faites de l’art avec l’alphabet japonais
    2018-08-26 00:29:02
  • pocket knives best
    Algérie télécoms lance un servie EVDO sur le nom Athir testé et approuvé
    2018-08-25 12:50:54
  • tooth implant Dubai
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2018-08-17 10:49:11
  • Hors
    Tutorial ReflectOMatic, ajouter facilement des effets de réflections
    2018-08-13 15:54:15
  • List Of Dentists In Dubai
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2018-08-08 03:04:52
  • Compra Venta Relojes
    OpenSocial : une plateforme de développement Google pour les réseaux sociaux
    2018-08-07 01:22:23
  • Mercedes car maintenance
    Publicité Toyota YARIS
    2018-07-30 16:22:08
  • Cable Type 2 Type 2
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2018-07-25 11:30:09
  • part worn tyres Brentwood
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2018-07-24 11:16:15

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