Lorsque vous créez votre site web, vous avez parfois besoin d’utiliser un bouton CSS3. Les boutons permettent à vos visiteurs d’interagir avec votre site. De plus, ces éléments participent au design d’un site internet. Au lieu d’utiliser un bouton classique, vous pouvez très bien les personnaliser grâce au CSS. Voici des exemples de boutons inspirés par les couleurs de Google.
Sommaire
Comment insérer un bouton CSS3 ?
Il y a trois façons d’utiliser les styles CSS dans un document HTML. Le premier consiste à insérer directement le code CSS dans le contenu HTML. La seconde méthode se fait en rédigeant des instructions CSS dans l’en-tête du document HTML. La dernière technique est prévue pour alléger le code HTML. En effet, les éléments de mise en forme CSS se trouvent dans un fichier externe dont on fait l’appel grâce à une balise.
Exemples de boutons inspirés par Google
Dans les exemples qui suivent, nous intégrerons directement les styles CSS dans le contenu HTML. Voici des boutons dans un style très simple :
<button style="padding:15px 0 15px 0 ; background-color:#db4437 ; color:white ; width:150px ; border-radius:none ; box-shadow:3px 3px 6px #999 ; border:2px solid #ccc">Bouton 1</button><button style="padding:15px 0 15px 0 ; background-color:#4285f4 ; color:white ; width:150px ; border-radius:none ; box-shadow:3px 3px 6px #999 ; border:2px solid #ccc">Bouton 2</button><button style="padding:15px 0 15px 0 ; background-color:#0F9D58 ; color:white ; width:150px ; border-radius:none ; box-shadow:3px 3px 6px #999 ; border:2px solid #ccc">Bouton 3</button><button style="padding:15px 0 15px 0 ; background-color:#F4B400 ; color:white ; width:150px ; border-radius:none ; box-shadow:3px 3px 6px #999 ; border:2px solid #ccc">Bouton 4</button>Les boutons suivants sont dotés d’une bordure arrondie et carrée :
<button style="padding:15px 0 15px 0 ; background-color:#db4437 ; color:white ; width:150px ; border-radius:12px 0 12px 0 ; box-shadow:3px 3px 6px #999 ; border:2px solid #ccc">Bouton 5</button><button style="padding:15px 0 15px 0 ; background-color:#4285f4 ; color:white ; width:150px ; border-radius:12px 0 12px 0 ; box-shadow:3px 3px 6px #999 ; border:2px solid #ccc">Bouton 6</button><button style="padding:15px 0 15px 0 ; background-color:#0F9D58 ; color:white ; width:150px ; border-radius:12px 0 12px 0 ; box-shadow:3px 3px 6px #999 ; border:2px solid #ccc">Bouton 7</button><button style="padding:15px 0 15px 0 ; background-color:#F4B400 ; color:white ; width:150px ; border-radius:12px 0 12px 0 ; box-shadow:3px 3px 6px #999 ; border:2px solid #ccc">Bouton 8</button>Pour les exemples suivants, voici différents boutons ovales et ronds :
<button style="padding:15px 0 15px 0 ; background-color:#db4437 ; color:white ; width:150px ; border-radius:18px ; box-shadow:3px 3px 6px #999 ; border:none">Bouton 9</button><button style="padding:15px 0 15px 0 ; background-color:#4285f4 ; color:white ; width:150px ; border-radius:50% ; box-shadow:3px 3px 6px #999 ; border:none">Bouton 10</button><button style="padding:15px 0 15px 0 ; background-color:#fff ; color:black ; width:150px ; border-radius:75% ; border-bottom:7px solid #0F9D58 ; border-top:7px solid #DB4437 ; border-left:7px solid #F4B400 ; border-right:7px solid #4285F4">Bouton 11</button><button style="width:85px ; height:150px ; background-color:#fff ; color:black ; width:150px ; border-radius:50% ; border-bottom:7px solid #0F9D58 ; border-top:7px solid #DB4437 ; border-left:7px solid #F4B400 ; border-right:7px solid #4285F4">Bouton 12</button>Les boutons au style avancé
Chaque bouton CSS3 que nous avons vu précédemment a été réalisé de la plus simple méthode : l’intégration directe du style CSS dans le code HTML. L’ajout de plus d’effets comme le survol de pointeur fait partie des éléments qui nécessitent la création à part entière de la classe CSS. En effet, les instructions doivent être définies dans la balise <style> dans l’en-tête <header> du document.
Si on souhaite faire appel à un style défini dans l’en-tête, on exécutera l’opération avec l’attribut class. Supposons que vous avez défini les instructions de style comme suit :
.bouton1 {
padding:15px 0 15px 0;
background:#db4437;
color:#fff;
width:150px;
border-radius:2px;
border:none;
}
Vous devez alors rédiger ceci dans le corps du document HTML pour faire apparaitre le bouton CSS3 et son style :
<button class=”bouton1”>Bouton 1</button>Les possibilités de style de bouton CSS3 sont infinies. Vous pouvez par exemple regarder cette vidéo pour un effet simple sur le survol et le clic du bouton :