### [Comment changer la couleur du bouton de soumission](https://wpforms.com/developers/how-to-change-the-submit-button-color/)
**Publié :** 10 octobre 2019
**Auteur :** Umair Majeed
**Extrait :** Ce tutoriel vous montrera comment utiliser CSS pour changer la couleur du bouton de soumission sur votre WPForms.
**Contenu :**
Souhaitez-vous personnaliser la couleur du bouton de soumission de votre formulaire pour qu'elle corresponde à la marque de votre site Web ? Bien que WPForms 1.8.1+ offre une personnalisation des couleurs intégrée via l'éditeur de blocs, vous pouvez également y parvenir en utilisant du CSS personnalisé pour un contrôle plus précis.
Ce guide vous montrera comment changer la couleur de votre bouton de soumission à l'aide de CSS.
Avec la sortie de WPForms 1.8.1, vous pouvez désormais facilement changer la couleur du bouton de soumission sans utiliser de CSS en ajoutant simplement le formulaire à votre page à l'aide d'un éditeur de blocs. Avec cette fonctionnalité de style de formulaire, vous pouvez styliser vos formulaires sans écrire de CSS. Pour en savoir plus à ce sujet, [veuillez consulter cette documentation utile](https://wpforms.com/how-to-style-wpforms-using-the-block-editor/ "Comment styliser WPForms à l'aide de l'éditeur de blocs").
Cependant, vous pouvez également utiliser du CSS personnalisé pour y parvenir, et pour ce tutoriel, c'est la méthode que nous utiliserons pour changer le style de la couleur du bouton **Soumettre**.
## Configuration du formulaire
Pour commencer, ouvrez le constructeur de formulaires en créant un nouveau formulaire ou en modifiant un formulaire existant. Ajoutez les champs de formulaire souhaités au besoin.
Pour obtenir de l'aide sur la création d'un formulaire, veuillez consulter notre guide complet sur [comment créer votre premier formulaire](https://wpforms.com/docs/creating-first-form/).
## Ajout du code CSS
L'extrait CSS suivant changera la couleur de votre bouton de soumission :
Si vous avez besoin d'aide sur comment et où ajouter du CSS à votre site, consultez notre tutoriel sur [l'ajout de styles CSS personnalisés](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
Le CSS ci-dessus changera l'arrière-plan de la couleur du bouton de soumission en bleu ([\#066AAB](https://www.htmlcsscolor.com/hex/066aab)) avec du texte blanc sur tous les boutons **Soumettre** de WPForms sur votre site.
Les couleurs de ce CSS sont définies à l'aide de codes hexadécimaux, dont vous pouvez [en savoir plus dans cette documentation](http://www.htmlcsscolor.com/)
Remarque : Pour des modifications de style supplémentaires du bouton de soumission, telles que les styles au survol, veuillez consulter [notre tutoriel sur le style du bouton de soumission](https://wpforms.com/docs/how-to-customize-the-submit-button/).
## Personnalisation du code
Pour utiliser des couleurs différentes, remplacez les codes hexadécimaux dans le code :
À la **ligne 7**, remplacez `#066AAB` par la couleur de bouton souhaitée.
À la **ligne 8**, remplacez `#066AAB` par la même couleur pour correspondre à la bordure.
À la **ligne 14**, remplacez `#04446E` par la couleur de survol souhaitée (généralement une nuance plus foncée de votre couleur de bouton).
Par exemple, pour faire un bouton rouge, vous pourriez utiliser :
```
background-color: #ff0000 !important;
border-color: #ff0000 !important;
```
## Foire aux questions
#### Q : Pourquoi ce CSS ne fonctionne-t-il pas pour moi ?
**R :** Si vous ne voyez pas vos modifications, videz d'abord le cache de votre navigateur. Si cela ne fonctionne toujours pas, votre thème pourrait remplacer les styles. Essayez d'ajouter `!important` à vos règles CSS comme montré dans notre exemple. Pour plus d'aide, consultez notre [guide de dépannage CSS](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/).
#### Q : Cela fonctionnera-t-il aussi pour les boutons Suivant et Précédent ?
**R :** Si vous utilisez un champ **Page Break** dans votre formulaire et que vous utilisez les boutons **Suivant** et **Précédent** pour la navigation, nous utiliserons du CSS qui donnera à tous ces boutons le même style exact. Copiez simplement ce CSS sur votre site.
```
.wpforms-form button[type=submit], button.wpforms-page-button {
background-color: #024488 !important;
border-color: #024488 !important;
color: #fff !important;
transition: background 0.3s ease-in-out;
}
.wpforms-form button[type=submit]:hover, button.wpforms-page-button:hover {
background-color: #022B57 !important;
}
```
#### Q : Puis-je cibler un seul de mes formulaires ?
**R :** Si vous vouliez changer un seul formulaire, vous ciblerez simplement l'ID du formulaire dans votre CSS. Dans cet exemple, nous allons cibler l'ID de formulaire **999** pour le bouton **Soumettre** ainsi que les boutons **Suivant** et **Précédent** du champ **Page Break**.
Vous devrez mettre à jour le **999** pour correspondre à votre propre ID de formulaire.
Si vous ne savez pas où trouver l'ID de votre formulaire, consultez notre guide sur [la localisation des ID de champ et de formulaire](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
```
button#wpforms-submit-999, form#wpforms-form-999 button.wpforms-page-button {
background-color: #024488;
border-color: #024488;
color: #fff;
transition: background 0.3s ease-in-out;
}
button#wpforms-submit-999:hover, form#wpforms-form-999 button.wpforms-page-button:hover {
background-color: #022B57;
}
```
Et voilà ! Vous avez maintenant changé la couleur de votre bouton de soumission. Ensuite, souhaitez-vous utiliser CSS pour personnaliser le bouton **Soumettre** d'autres manières ? Veuillez consulter notre tutoriel sur [l'utilisation de CSS pour personnaliser le bouton de soumission](https://wpforms.com/developers/using-css-to-personalize-the-submit-button/ "Utilisation de CSS pour personnaliser le bouton de soumission").
**Catégories :** Style
**Tags :** CSS
---