Attention !

Cet article contient du code CSS et s'adresse aux développeurs. Nous proposons ce code à titre de courtoisie, mais nous n'offrons pas de support pour les personnalisations de code ou le développement par des tiers.

Pour obtenir des conseils supplémentaires, veuillez consulter le tutoriel de WPBeginner sur l'ajout de CSS personnalisé.

Ignorer

Utiliser le CSS pour personnaliser le bouton d'envoi

Mis à jour :
Afficher Markdown

Introduction

Vous souhaitez utiliser le CSS pour personnaliser le bouton Envoyer ? Le CSS offre un potentiel immense pour divers aspects de votre site, et dans ce tutoriel, nous vous fournirons des exemples pratiques pour exploiter les capacités du CSS afin de transformer l'apparence de votre bouton Envoyer.

Pour ce tutoriel, nous n'aborderons pas la création de formulaires. Si vous avez besoin d'aide pour créer votre formulaire, consultez ce guide informatif.

Nouveau dans le CSS ? Nos amis de WPBeginner fournissent une excellente définition et des exemples utiles. Découvrez-en plus sur ce sujet sur leur page de glossaire informative.

Tous les exemples de ce tutoriel vous donneront le CSS pour changer votre bouton pour tous les formulaires, mais aussi pour des formulaires individuels.

Pour apprendre à intégrer le CSS dans votre site web, consultez ce tutoriel. Si vous avez besoin d'aide pour trouver l'ID de votre formulaire, consultez ce tutoriel.

Bouton pleine largeur

Dans cet exemple, nous visons à faire correspondre la largeur du bouton Envoyer avec nos champs de formulaire. Pour y parvenir, nous appliquerons le CSS suivant.

Pour un formulaire unique

Cet exemple cible uniquement le formulaire avec l'ID 23.

button#wpforms-submit-23 {
    width: 100%;
}

Pour tous les formulaires

Cet exemple cible tous les WPForms.

button.wpforms-submit {
    width: 100% !important;
}

Effet de bouton enfoncé pour un formulaire unique

En utilisant le CSS suivant, nous donnerons l'impression que le bouton est enfoncé lorsqu'il est cliqué.

Pour un formulaire unique

Cet exemple cible uniquement le formulaire avec l'ID 23.

button#wpforms-submit-23 {
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #b95d52;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

button#wpforms-submit-23:hover {
	background-color: #55555e;
}

button#wpforms-submit-23:active {
  background-color: #55555e;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

Pour tous les formulaires

Cet exemple cible tous les WPForms.

button.wpforms-submit {
  display: inline-block !important;
  font-size: 24px !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  outline: none !important;
  color: #fff !important;
  background-color: #b95d52 !important;
  border: none !important;
  border-radius: 15px !important;
  box-shadow: 0 9px #999 !important;
}

button.wpforms-submit:hover {
	background-color: #55555e !important;
}

button.wpforms-submit:active {
  background-color: #55555e !important;
  box-shadow: 0 5px #666 !important;
  transform: translateY(4px) !important;
}

ce CSS fera en sorte que le bouton d'envoi paraisse enfoncé lorsqu'il est cliqué

Soumettre avec 2 lignes de texte

Pour cet exemple, nous allons avoir un bouton avec 2 lignes de texte.

Pour un formulaire unique

Cet exemple cible uniquement le formulaire avec l'ID 23.

button#wpforms-submit-23 {
    max-width: 20%;
    line-height: 1.2em;
    height: auto;
}

Pour tous les formulaires

Cet exemple cible tous les WPForms.

button.wpforms-submit {
    max-width: 20% !important;
    line-height: 1.2em !important;
    height: auto !important;
}

avec ce CSS, vous pouvez faire apparaître le bouton d'envoi sur plus de 2 lignes de texte

Animation au survol

Pour cet exemple, nous ajoutons une double flèche au survol du bouton grâce à la propriété content: '\00bb'; dans le CSS. Pour plus d'informations sur la recherche du bon code HTML pour votre symbole, veuillez consulter la documentation de W3C Schools.

Vous pourriez changer cette icône pour n'importe quelle icône basée sur des polices, telle que trouvée dans ce tutoriel.

Pour un formulaire unique

Cet exemple cible uniquement le formulaire avec l'ID 23.

button#wpforms-submit-23 {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button#wpforms-submit-23:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}

button#wpforms-submit-23:hover {
  padding-right: 25px;
}

button#wpforms-submit-23:hover:after {
  opacity: 1;
  right: 50px;
}

Pour tous les formulaires

Cet exemple cible tous les WPForms.

button.wpforms-submit {
  border-radius: 4px !important;
  border: none !important;
  color: #FFFFFF !important;
  text-align: center !important;
  width: 200px !important;
  transition: all 0.5s !important;
  cursor: pointer !important;
  margin: 5px !important;
  cursor: pointer !important;
  display: inline-block !important;
  position: relative !important;
  transition: 0.5s !important;
}

button.wpforms-submit:after {
  content: '\00bb' !important;
  position: absolute !important;
  opacity: 0 !important;
  top: 11px !important;
  right: 0 !important;
  transition: 0.5s !important;
}

button.wpforms-submit:hover {
  padding-right: 25px !important;
}

button.wpforms-submit:hover:after {
  opacity: 1 !important;
  right: 50px !important;
}

ce CSS vous donnera un effet d'animation lorsque vous passerez la souris sur le bouton

Changer la couleur

Pour cet exemple, nous allons changer la couleur du bouton. Nous allons également changer la taille du texte, la couleur du texte et la famille de polices dans cet exemple.

Pour un formulaire unique

Cet exemple cible uniquement le formulaire avec l'ID 23.

button#wpforms-submit-23 {
    font-family: roboto;
    font-size: 22px;
    background-color: #b95d52;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: unset;
    border: 1px solid transparent;
    background: unset;
    background-color: #b95d52;
}

button#wpforms-submit-23:hover {
    background-color: #ffffff;
    border: 1px solid #b95d52;
    opacity: 1;
    color: #b95d52;
}

Pour tous les formulaires

Cet exemple cible tous les WPForms.

button.wpforms-submit {
    font-family: roboto !important;
    font-size: 22px !important;
    background-color: #b95d52;
    text-transform: uppercase;
    color: #ffffff !important;
    box-shadow: unset !important;
    border: 1px solid transparent !important;
    background: unset !important;
    background-color: #b95d52 !important;
}

button.wpforms-submit:hover {
    background-color: #ffffff !important;
    border: 1px solid #b95d52 !important;
    opacity: 1 !important;
    color: #b95d52 !important;
}

cet exemple de bouton a changé la couleur, la couleur de fond, la taille de la police, la famille de polices et mis le texte en majuscules

Bouton avec ombre portée

Cet exemple vous montrera comment appliquer une ombre portée au bouton en utilisant le CSS suivant.

Pour un formulaire unique

Cet exemple cible uniquement le formulaire avec l'ID 23.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Alternativement, vous pourriez appliquer l'ombre portée uniquement au survol en utilisant ce CSS pour le formulaire.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

button#wpforms-submit-23:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

Pour tous les formulaires

Cet exemple cible tous les WPForms.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Et encore une fois, comme dans l'exemple ci-dessus, vous pourriez appliquer l'ombre portée uniquement au survol.

button.wpforms-submit {
    background-color: #b95d52 !important;
    border: none !important;
    color: white !important;
    padding: 10px 30px !important;
    text-align: center;
    text-decoration: none !important;
    display: inline-block;
    font-size: 16px !important;
    margin: 4px 2px !important;
    cursor: pointer !important;
    -webkit-transition-duration: 0.4s !important;
    transition-duration: 0.4s !important;
}

button.wpforms-submit:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19) !important;
}

dans cet exemple CSS, nous montrons une ombre portée sur le bouton, soit en permanence, soit juste au survol, selon l'extrait que vous utilisez

Et ce ne sont là que quelques exemples de la facilité avec laquelle il est possible de personnaliser le bouton d'envoi en utilisant le CSS. Souhaitez-vous également personnaliser les étiquettes de vos formulaires ? Jetez un œil à notre tutoriel sur Comment ajouter des images avant ou après les étiquettes de votre formulaire.

FAQ

Q : Puis-je utiliser ce CSS pour les boutons de saut de page également ?

R: Absolument, pour utiliser l'un de ces exemples avec des boutons standard lorsque vous utilisez le bouton Page Breakbutton.wpforms-page-button.

Alternativement, si vous vouliez cibler un seul formulaire, vous utiliseriez la classe CSS form#wpforms-form-3221 button.wpforms-page-button à la place, et n'oubliez pas de mettre à jour l'ID du formulaire pour qu'il corresponde à votre propre ID de formulaire.

Par exemple, l'exemple Animation au survol comme montré ci-dessus pour le bouton Envoyer, nous allons faire de même pour les boutons de saut de page.

Ce CSS est pour un formulaire spécifique, l'ID du formulaire 3221. Si vous voulez garder cela pour un seul formulaire, vous devrez mettre à jour le 3221 pour qu'il corresponde à votre propre ID. Pour savoir comment trouver l'ID de votre formulaire, veuillez consulter notre documentation utile.

form#wpforms-form-3221 button.wpforms-page-button {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
 
form#wpforms-form-3221 button.wpforms-page-button:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}
 
form#wpforms-form-3221 button.wpforms-page-button:hover {
  padding-right: 25px;
}
 
form#wpforms-form-3221 button.wpforms-page-button:hover:after {
  opacity: 1;
  right: 50px;
}

Ce CSS serait pour tous les formulaires.

button.wpforms-page-button {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
 
button.wpforms-page-button:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}
 
button.wpforms-page-button:hover {
  padding-right: 25px;
}
 
button.wpforms-page-button:hover:after {
  opacity: 1;
  right: 50px;
}

voici un exemple pour changer les boutons de saut de page

Étiqueté :
Toujours bloqué ? Comment pouvons-nous vous aider ?
Dernière mise à jour le 29 août 2023