Les boutons sous WordPress jouent un rôle important dans la cohérence et l’aboutissement d’une charte graphique. Découvrez comment les personnaliser!
La fluidité et la cohérence graphique sont des éléments non-négligeables qui améliorent l’expérience des utilisateurs sur un site internet.
Voici quelques astuces pour les personnaliser…
Les plugins
Certains plugins comme Visual Editor Custom Buttons ou Standout CSS3 Buttons permettent de créer des boutons sous WordPress très facilement, sans plonger dans le code.
Néanmoins, l’extension la plus connue et la plus complète reste MaxButtons.
Disponible en version gratuite et payante, ce plugin offre une multitude de paramètres de personnalisation et s’occupe de tout à votre place. Le plus difficile est encore de décider quel style donner à ses créations.
Dans la version payante, on appréciera particulièrement le catalogue Google Web Fonts et l’intégration d’icônes.
Faites-les vous même!
Les boutons sous WordPress, c’est comme la cuisine: c’est encore meilleur lorsqu’on y met la main à la pâte.
Commençons par créer un simple lien à laquelle nous ajouterons une classe « monBouton » dans l’éditeur de texte de WordPress. Attention, nous sommes dans la partie « Texte » de l’éditeur et non dans la partie « Visuel ».
<a href="http://www.ma-page.com" class="monBouton">monBouton</a>
Dans un nouvel onglet, ouvrez l’éditeur CSS (Apparence -> Editeur) et collez ce code tout en bas de la Stylesheet (style.css)
.monBouton {
margin:0 auto;
display: block;
text-align: center;
font-weight: 700;
text-decoration: none;
font-family: Arial,sans-serif;
width: 120px;
padding: 7px 10px;
color: #333;
background: #e74c3c;
}
.monBouton:hover {
background: #ffb709; color: #fff;
}
}
… et enregistrez. Rendez-vous sur votre page récemment créée pour voir et affiner le réVous avez à présent les paramètres de base pour changer la taille, la couleur de fond, la couleur du texte et même la font. À vous de chipoter!
Et vous, comment créez-vous vos boutons? Montrez-nous vos créations!