5 conceptions créatives de modules de boutons Divi et comment les créer

Dans cet article, je vais vous montrer 5 conceptions créatives de modules de boutons Divi que vous pouvez facilement réaliser avec le module de boutons de Divi. Le module de boutons est l'un des plus populaires de tous les modules Divi, car les boutons sont si importants pour diriger les visiteurs vers les objectifs que vous souhaitez atteindre sur un site Web. Par conséquent, il est très important que nous, en tant que concepteurs et développeurs, rendions ces boutons attrayants et accrocheurs.

Creusons !

Aperçu

Voici un bref aperçu des boutons que nous allons construire dans ce tutoriel.

1. Bouton de bordure flèche gauche

2. Bouton de ligne mobile

3. Tirez le bouton de la languette

4. Bouton de logo de cercle

5. Bouton de lueur

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

5 conceptions de modules de boutons Divi et comment les créer

1. Bouton de bordure flèche gauche

Pour commencer, créez une nouvelle section avec une ligne à une colonne et ajoutez un module de boutons à la ligne.

Modifiez ensuite le texte du contenu par défaut du bouton pour lire « Commencer » (ou ce que vous voulez réellement).

Il est maintenant temps de passer aux paramètres de conception et de mettre à jour les éléments suivants :

Utiliser des styles personnalisés pour le bouton : OUI
Couleur du texte du bouton : #ffffff
Couleur d'arrière-plan du bouton : #324376
Largeur de la bordure : 0px
Espacement des lettres des boutons : 0,2 em
Police des boutons : Fira Sans
Style de police : TT ​​(majuscule), U (souligné)
Couleur de soulignement : rgba(255,255,255,0.2)
Style de soulignement : double
Icône du bouton : voir capture d'écran
Couleur de l'icône du bouton : #ff4751
Emplacement de l'icône du bouton : à gauche

Rembourrage personnalisé : 40 pixels à gauche, 20 pixels à droite

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 22px
Position verticale de l'ombre de la boîte : 0px
Couleur de l'ombre : #ff4751

(Le rembourrage gauche personnalisé de 40px crée un espace fixe qui est rempli avec l'ombre de la boîte pour s'asseoir contre l'icône du bouton flèche gauche.)

Étant donné que l'ombre de la boîte de gauche affleure le début de l'icône de flèche, cela crée un bel effet de bordure de flèche. Si, pour une raison quelconque, il ne s'aligne pas contre l'icône, vous pouvez ajuster la position horizontale selon vos besoins. La beauté de cette conception est que la bordure de la flèche gauche restera en place même lors de l'ajout de différentes quantités de texte de bouton.

Voici le résultat final.

2. Bouton de ligne mobile

Ce style de bouton suivant a plus une sensation technique et minimaliste. Les lignes sont créées à l'aide d'une ombre de boîte et d'un dégradé de fond séparés par une bordure transparente. J'ai également ajouté un effet de survol qui déplace l'ombre de la boîte vers la droite, qui à son tour déplace légèrement la ligne du bas vers la droite pour une interaction subtile.

Pour commencer, créez une nouvelle section avec une ligne à une colonne et ajoutez un module de boutons à la ligne.

Mettez à jour le contenu du texte du bouton comme vous le souhaitez. Je laisse la valeur par défaut « cliquez ici » pour cet exemple. Mettez ensuite à jour les paramètres de conception comme suit :

• Utiliser des styles personnalisés pour le bouton : OUI
• Couleur du texte du bouton : #3b7986
• Dégradé d'arrière-plan du bouton Couleur gauche : rgba(255,255,255,0)
• Dégradé d'arrière-plan du bouton Couleur droite : #3b7986
• Direction du gradient : 180 deg
• Position de départ : 96 %
• Position finale : 0%
• Largeur de bordure de bouton : 10px
• Couleur de la bordure du bouton : rgba(0,0,0,0)
• Rayon de la bordure du bouton : 0px
• Espacement des lettres des boutons : 6px
• Police des boutons : Exo 2
• Poids de la police : gras
• Style de police : Tt (petites majuscules)
• Icône du bouton : flèche vers la droite (voir capture d'écran)
• Afficher uniquement l'icône au survol du bouton : NON
• Rembourrage personnalisé : 0px en bas
• Box Shadow : voir capture d'écran
• Position horizontale de l'ombre de la boîte : -15 px
• Position verticale de l'ombre de la boîte : 15 px
• Force de propagation de l'ombre de la boîte: -13px
• Couleur de l'ombre : #3b7986

Vous devrez peut-être également définir la couleur d'arrière-plan sur #ffffff au survol, car il s'agit du paramètre par défaut pour le bouton.

La clé de cette conception est le dégradé de couleur d'arrière-plan et l'ombre de la boîte. En définissant le point de départ du dégradé de couleur d'arrière-plan sur 96 %, cela crée une ligne d'une largeur de 4 % au bas du bouton. Ensuite, une fois que nous avons positionné et coloré l'ombre de la boîte, nous avons un autre élément de ligne qui enveloppe bien le bouton. De plus, l'icône de flèche droite fonctionne également bien avec les éléments de conception de ligne.

Voici la conception finale.

Pour ajouter l'effet de survol qui déplace l'ombre de la boîte, revenez aux paramètres de conception et survolez l'option "Position horizontale de l'ombre de la boîte". Vous verrez une icône de flèche s'afficher juste à côté du texte. Cliquez dessus pour ouvrir les options de survol pour ce paramètre particulier.

Cliquez ensuite sur l'onglet survol et modifiez la valeur en 13px.
Vous verrez l'effet de survol prévisualisé dans le générateur visuel.

Voici à quoi ressemble l'effet de survol :

3. Tirez le bouton de la languette

Cette conception de bouton suivante ajoute une ombre de boîte pour encadrer l'icône du bouton droit qui reste dans une position absolue. Au survol, le bouton s'étend vers la droite, créant l'effet que vous tirez sur un onglet.

Pour créer le bouton, commencez par créer une nouvelle section avec une ligne à une colonne, puis ajoutez un module de bouton à la ligne.

Ouvrez les paramètres du module de boutons et mettez à jour le texte du bouton sous l'onglet contenu comme vous le souhaitez (je vais utiliser le texte « En savoir plus »).

Passez ensuite à l'onglet Conception et mettez à jour les éléments suivants :

Utiliser des styles personnalisés pour le bouton : OUI
Couleur du texte du bouton : #ffffff
Dégradé d'arrière-plan du bouton Couleur gauche : #7D80DA
Dégradé d'arrière-plan du bouton Couleur droite : #8EEDF7
Direction du gradient : 90 degrés
Largeur de la bordure du bouton : 0px
Rayon de bordure de bouton : 10px
Espacement des lettres des boutons : 1px
Police des boutons : Source Sans Pro
Poids de la police : gras
Style de police : TT
Icône du bouton : voir la capture d'écran
Couleur de l'icône du bouton : #ffffff
Rembourrage personnalisé : 1 em à gauche, 2,5 em à droite
Box Shadow : voir la capture d'écran
Position horizontale de l'ombre de la boîte : -35px
Position verticale de l'ombre de la boîte : 0px
Couleur de l'ombre : #7d80da

La clé de cette conception est l'ombre de la boîte à droite qui encadrera l'icône. Mais pour le moment, l'icône doit être positionnée pour s'adapter à l'intérieur de la zone de dégradé. Pour ce faire, nous devons ajouter du CSS personnalisé.

Accédez à l'onglet Avancé et entrez le CSS suivant dans la zone de saisie Après :

position: absolute;
right: 5%;

Ce CSS cible l'emplacement de l'icône et lui donne une position absolue à 5% du bord droit du bouton.

Découvrez la conception jusqu'à présent.

Maintenant, pour ajouter l'effet de survol, il nous suffit de mettre à jour la bonne option de remplissage sous l'onglet de survol. Pour ce faire, ouvrez les paramètres du bouton et ouvrez les options de survol en survolant l'élément de remplissage personnalisé et en cliquant sur l'icône du curseur qui apparaît. Ensuite, sélectionnez l'onglet survol et entrez ce qui suit :

Rembourrage personnalisé : 4 em à droite

Voyons maintenant le résultat final.

4. Bouton de logo de cercle

Pour la prochaine conception, nous allons transformer une icône/image de cercle en un bouton cliquable avec un effet de survol sympa qui montre un court appel à l'action.

Pour commencer, créez une nouvelle section avec une ligne à une colonne et ajoutez un module de bouton à la ligne.

Ensuite, ouvrez les paramètres de conception des boutons. Sous l'onglet contenu, ajoutez le mot « Go » pour le texte du bouton.

Ensuite, allez dans les paramètres de conception et choisissez d'utiliser les styles de boutons personnalisés. Ajoutez d'abord l'image du cercle comme image d'arrière-plan pour le bouton. Pour que cela fonctionne, assurez-vous d'utiliser une image png d'un logo ou d'une icône qui est un cercle parfait et que les dimensions de l'image sont de la même hauteur et de la même largeur. L'image que j'utilise est un png de 118 pixels sur 118 pixels. Prends-le ici si tu veux :

Une fois que vous avez ajouté l'image d'arrière-plan, assurez-vous que la taille de l'image d'arrière-plan est définie sur « Taille réelle ». Cela garantira que l'image conserve ses dimensions d'origine (118 px par 118 px).

Ensuite, nous voulons dimensionner notre bouton pour qu'il corresponde aux dimensions exactes de notre image circulaire. Pour ce faire, passez à l'onglet Avancé et entrez le CSS personnalisé suivant dans l'élément principal :

width: 118px;
height: 118px;
line-height: 118px !important;
text-align: center;

Notez que le CSS définit la largeur, la hauteur et la hauteur de ligne sur la même valeur de 118px. C'est la même largeur et la même hauteur de notre image. Maintenant, l'image s'intègre parfaitement dans le bouton. La hauteur de ligne est définie sur 118px afin que le texte à l'intérieur du bouton soit centré verticalement dans le bouton (il n'est pas encore parfaitement centré car il y a encore du rembourrage dont nous devons nous débarrasser qui le jette). Et le text-align: center garantit que le texte à l'intérieur du bouton reste centré même lorsque le module de boutons est aligné à gauche ou à droite.

Maintenant, tout ce que nous avons à faire est de terminer avec quelques paramètres de conception qui complèteront la conception. Accédez à l'onglet Conception et mettez à jour les éléments suivants :

Couleur du texte du bouton (par défaut) : rgba(0,0,0,0)
Couleur du texte du bouton (survol) : #ffffff

(Cela masque le texte du bouton par défaut et l'affiche en blanc au survol)

Couleur d'arrière-plan (par défaut) : #121212
Couleur d'arrière-plan (survol): #da00f2

(Cela montre un fond noir derrière l'image par défaut, puis une couleur de fond rose vif au survol.)

Largeur de la bordure du bouton : 0px
Rayon du bouton : 50 % ;

(La définition du rayon du bouton à 50 % changera le bouton en une forme de cercle car la hauteur et la largeur du bouton ont été définies sur 118 pixels dans un css personnalisé.)

Police des boutons : Poppins
Poids de la police : gras
Style de police : TT
Afficher l'icône du bouton : NON (avoir une icône de bouton supprimera le texte centré)
Rembourrage personnalisé : 0 pixels en haut, 0 pixels en bas

(Il est important de supprimer le rembourrage supérieur et inférieur afin que la hauteur de ligne que nous avons définie dans le CSS personnalisé centrera le texte verticalement.)

Box Shadow : voir capture d'écran
Position verticale de l'ombre de la boîte : 0px
Couleur de l'ombre (par défaut) : rgba(0,0,0,0)
Couleur de l'ombre (survol): rgba(0,0,0,0.68)

(Cela affichera une légère ombre de boîte autour du cercle en survol pour un effet popout supplémentaire.)

Voici le design final avec l'effet de survol.

5. Bouton de lueur

Cette dernière conception est assez simple et simple à faire. Tout ce qu'il faut, c'est une utilisation créative des couleurs de dégradé d'arrière-plan et des couleurs d'ombre de la boîte. L'effet de survol augmente simplement la taille de la boîte-ombre pour donner plus d'effet de lueur.

Pour commencer, créez une nouvelle section avec une ligne à une colonne et ajoutez un module de boutons à la ligne. Avant de mettre à jour le module de boutons, ouvrez les paramètres de la section et attribuez à la section une couleur d'arrière-plan sombre (#333333).

Ouvrez maintenant les paramètres du bouton.

Vous pouvez laisser le texte du bouton par défaut « Cliquez ici ». Mettez ensuite à jour les paramètres de conception suivants :

Alignement des boutons : Centre
Utiliser des styles personnalisés pour le bouton : OUI
Taille du texte du bouton : 18px
Couleur du texte du bouton : #ffffff

Dégradé d'arrière-plan du bouton Couleur gauche : #00ff8c
Dégradé d'arrière-plan du bouton Couleur droite : #15c39a
Type de dégradé : Radial
Direction radiale : Centre
Position finale : 75 %

(La définition du type de dégradé sur Radial donnera au dégradé une forme de cercle qui s'étend vers l'extérieur. Assurez-vous que la couleur la plus claire apparaît au milieu du dégradé pour créer l'effet de lueur.)

Largeur de la bordure du bouton : 0px
Rayon de la bordure du bouton : 100 pixels
Espacement des lettres des boutons (par défaut) : 4px
Espacement des lettres des boutons (survol): 5px

(Augmenter l'espacement des lettres au survol élargira légèrement l'ensemble du bouton pour un bel effet)

Poids de la police : Ultra gras
Style de police : I, TT
Icône du bouton : flèche vers la droite (voir capture d'écran)
Rembourrage personnalisé : 20 pixels en haut, 20 pixels en bas, 30 pixels à gauche, 50 pixels à droite

(vous avez besoin de plus de rembourrage à droite pour tenir compte de l'icône du bouton flèche droite)

Box Shadow : voir capture d'écran
Position verticale de l'ombre de la boîte : 0px
Force du flou de l'ombre de la boîte (par défaut): 64px
Force du flou de l'ombre de la boîte (survol): 100px
Force de propagation de l'ombre de la boîte: -12px
Couleur de l'ombre : rgba(0,255,140,0,66)

(L'ombre de la boîte ajoute à l'effet de lueur lorsque vous faites correspondre la couleur de l'ombre avec la couleur du bouton. L'augmentation de la force du flou au survol augmentera également la lueur du bouton)

Découvrez la conception finale avec l'effet de survol.

Plus d'inspiration pour les boutons

Pour en savoir plus sur l'inspiration sur les styles de boutons, consultez certains de ces autres articles :

• Comment créer un bouton de police d'icône avec Divi
• Concevez une mise en page Divi unique en plein écran avec un bouton de défilement animé
• Comment styliser vos boutons sociaux Monarch pour qu'ils correspondent à la conception de votre site
• 7 clés pour créer un bouton d'abonnement irrésistible

Dernières pensées

J'espère que ces exemples vous ont inspiré pour maximiser le module Divi Button de nouvelles manières créatives ! Parce qu'un appel à l'action est si important pour votre site Web, il est toujours bon d'avoir une variété d'idées dans notre boîte à outils pour créer des options de boutons uniques. N'hésitez pas à utiliser ces idées pour créer vos propres styles de boutons incroyables!

J'ai hâte de vous entendre dans les commentaires.

À votre santé!