Étiquettes : Design

Vous avez acheté un thème wordpress, mais les boutons fournis avec celui-ci ne vous conviennent pas? Apprenez à créer vos propres boutons grâce au css!

Parfois, vous voudriez pouvoir un peu plus personnaliser vos designs que ce que wordpress vous donne l’occasion de faire. Sachez que c’est une chose faisable, et ce, très facilement. Pour ce faire, il vous faudra un peu d’inspiration, quelques codes css – donné dans l’article évidemment – et les couleurs que vous voulez utiliser.

De la programmation ? Pas pour vous ?

C’est vrai que lorsque l’on parle de programmation, beaucoup de gens ont des boutons qui poussent d’un coup sur leur visage et un frison d’effroi qui parcours leur dos, mais pas d’inquiétude, nous n’allons pas faire une programmation de haute voltige. Nous allons juste appliquer un style, c’est comme si vous vous habilliez le matin avec des nouveaux vêtements…

Commençons notre aventure dans notre article

Laissez vos aprioris derrière vous et lançons nous à pieds joints dans la création de vos boutons. Afin de pouvoir personnaliser un bouton, vous allez devoir créer un lien renvoyant vers la page désirée. Ensuite, dans WordPress, vous avez en haut à droite de votre zone de texte, deux boutons : Visuel & Texte. Appuyez sur texte.

Vous voilà dans votre article mais en HTML. Pas d’inquiétude, nous n’allons pas y rester longtemps. Rechercher le lien que vous venez de faire – si vous cliquez sur pomme+f ou ctrl+f vous activez la recherche du navigateur internet pour aller plus vite ! – lorsque vous l’aurez trouvé, vous pourrez voir qu’il est entouré de choses étrange comme ceci : <a href= »//www.leliendemapage.com »>MonBouton</a>

La seule chose que vous devez faire c’est y écrire ceci : class= »monBouton » ce qui donne donc : <a href= »//www.leliendemapage.com »  class= »monBouton » >MonBouton</a>

Créons maintenant notre bouton en css

Vous allez maintenant devoir ouvrir deux pages, la première est celle de votre article où se trouve votre bouton et la seconde est l’éditeur de code css. Cette page se trouve normalement dans Apparence > éditeur. Si vous n’y avez pas accès, demandez à votre webmaster de venir vous donner un coup de pouce…

Vous allez maintenant pouvoir copier-coller le code ci-dessous touuuuut en bas du document modifiable :

.monBouton{
margin:0 auto;
display: block;
text-align: center;
font-weight: 700;
text-decoration: none;

width: 120px;
padding: 7px 10px;

color: #333;
background: #ffb709;
}
.monBouton:hover{
background: #1971a9;
color: #fff;
}

Vous pouvez voir dans .monBouton qu’il y a trois groupes différents. Le premier ne vous intéresse pas et vous ne devez même pas y toucher !

Le deuxième correspond à la taille de votre bouton, vous pouvez vous amusez à changer un peu les chiffres pour voir ce que cela donne et arriver à l’effet que vous recherchez. Sachez que pour le padding, le premier chiffre correspond à la distance ajoutée en haut et en bas du texte et le deuxième, la droite et la gauche.

Le dernier groupe correspond aux couleurs. En ce qui concerne ce point, vous devez utilisez des valeurs hexadecimal – avec un # – ou une valeur RGB, à ce moment-là, vous devrez remplacer le chiffre #112233 par rgb(255,255,255). Pensez à adapter ces codes avec vos couleurs. Si vous n’avez pas encore défini vos couleurs, vous pouvez utiliser un outil comme Kuler. Si vous changez background, cela changera la couleur du bouton, si vous changez le color, vous changerez le texte.

Dans .monBouton:hover, vous spécifiez la couleur lorsque quelqu’un survole votre bouton. Choisissez donc une deuxième couleur.Lorsque vous avez fait vos changements, cliquez sur Mettre à jour le fichier. Allez sur votre article et rechargez la page. Votre bouton devrait maintenant être affiché !

Alors, vous avez réussi à créer vos propres boutons ? Vous voulez nous montrer vos créations ? N’hésitez pas !

---