Comment créer des boutons personnalisés sur son site ?

3 avril 2017 |   |  ,

Vous connaissez déjà les styles de boutons que vous pouvez utiliser grâce à 6temFlex votre outil de création de site Internet professionnel avec WordPress : des boutons avec bordures, et des boutons avec fond uni, dont vous déterminez la couleur dans « Personnalisation et widgets« .

Mais rien ne vous empêche de créer vous-même vos boutons personnalisés !

Si vous avez une fibre graphique, vous pouvez créer vos propres boutons à partir d’une image que vous intégrerez dans votre page. Cela peut donner libre cours à votre imagination et créer toutes sortes de boutons: ronds, ovales, en dégradé de couleurs,…

Une fois votre image intégrée, il vous suffit de mettre un lien sur votre image pour rediriger la page désignée par le bouton.

Toutefois aucune interaction n’est possible avec le bouton. Ce bouton étant une image, il ne se modifiera pas en le survolant ou en cliquant dessus.

bouton-300x81

(Exemple de bouton crée sur un site 6temFlex à partir d’une image)

Vous pouvez faire la même chose avec les logos des réseaux sociaux.

Une autre alternative de bouton est possible: les boutons bootstrap.

Ces boutons seront à intégrer directement dans la partie « Texte » de l’éditeur de texte d’une page.

zone-texte-1024x384

Le bouton dit « tag » est intégré dans la page à partir de la ligne de code:

<a class="btn btn-default" href="lien-de-votre-bouton" role="button"> Link </a>

Link

Par défaut, ce bouton est blanc, au contour noir et devient gris au survol.

Cependant, il est possible de lui attribuer d’autres couleurs et d’autres tailles !

Si vous souhaitez y apporter une couleur, il vous suffit de modifier la valeur « default » par une valeur spécifique dans la « class » du bouton, comme par exemple, pour un bouton de couleur bleu foncé, il faut lui approprier la class: « btn btn-primary »:

<a class="btn btn-primary" href="lien-de-votre-bouton"role="button">Primary</a>

Primary

Voici toutes les classes de couleurs à approprier à la classe signalée sur le bouton.

Modifiez le mot « primary » dans la ligne de code précédente par un des mots ci-dessous pour lui affecter la couleur désignée sur le bouton.

Default Primary Success Info Warning Danger

Exemple pour un bouton vert :

<a class="btn btn-success" href="lien-de-votre-bouton"role="button">Sucess</a>

Si vous souhaitez modifier la taille du bouton, il faut apporter à la « class » du bouton une donnée supplémentaire.

  • Pour un grand bouton :
<a class="btn btn-primary btn-lg" href="lien-de-votre-bouton"role="button">Grand bouton</a>
<a class="btn btn-default btn-lg" href="lien-de-votre-bouton"role="button">Grand bouton</a>

Grand bouton Grand bouton

  • Le bouton de taille standard :
<a class="btn btn-primary" href="lien-de-votre-bouton"role="button">Bouton normal</a>
<a class="btn btn-default" href="lien-de-votre-bouton"role="button">Bouton normal</a>

Bouton normal Bouton normal

  • Le petit bouton :
<a class="btn btn-primary btn-sm" href="lien-de-votre-bouton"role="button">Petit bouton</a>
<a class="btn btn-default btn-sm" href="lien-de-votre-bouton"role="button">Petit bouton</a>

Small button Small button

  • Le extra-petit bouton :
<a class="btn btn-primary btn-xs" href="lien-de-votre-bouton"role="button">Extra petit bouton</a>
<a class="btn btn-default btn-xs" href="lien-de-votre-bouton"role="button">Extra petit bouton</a>

Extra petit bouton Extra petit bouton

La ligne de code à saisir pour intégrer un bouton vers le site 6tem Flex, rouge et de petite taille est :

<a class="btn btn-danger btn-sm" href="https://6temflex.com"role="button">Petit bouton vers notre site</a>

Petit bouton vers notre site