Guide de l'utilisateur JotForm / Comment créer de meilleurs formulaires /

Comment Personnaliser le Bouton d'Envoi avec CSS

Comment Personnaliser le Bouton d'Envoi avec CSS

Essayez le cours vidéo sur le Générateur de Formulaire pour créer de fantastiques styles de boutons d'envoi!


Saviez-vous que le vert et le bleu sont les couleurs les plus relaxantes? C'est pourquoi ils sont utilisés par les sites Web les plus populaires pour aider les utilisateurs à se sentir bien. Les boutons d'envoi dans les formulaires web doivent également être appropriés, car c'est là que les gens partagent leurs informations les plus sensibles.

Avec ce guide, vous allez apprendre à personnaliser vos boutons d'envoi afin que vos visiteurs se sentent bien lorsqu'ils envoient leurs informations et augmenter votre taux de conversion. 

1. Cliquez sur l'icône Générateur de Formulaire.



2. Allez dans l'onglet "STYLES" puis défilez vers bas jusqu'au champ Injecter du CSS personnalisé et collez le code CSS suivant ou votre propre code CSS personnalisé.



.form-submit-button {

background: #0066A2;

color: white;

border-style: outset;

border-color: #0066A2;

height: 50px;

width: 100px;

font: bold 15px arial, sans-serif;

text-shadow:none;

}

Voici à quoi cela ressemblera par la suite:


 

Explication du code CSS:

.form-submit-button - Sélectionne le bouton d’envoi sur votre formulaire. 

background - Définit la couleur d'arrière-plan derrière le texte.

color - Détermine la couleur de votre texte.

border-style - Définit le style des bordures du bouton d'envoi.

border-color - Définit la couleur des bordures du bouton d'envoi.

height - Définit la hauteur du bouton en pixels.

width - Définit la largeur du bouton en pixels.

font - Définit les propriétés de la police de caractère.


REMARQUE: n'oubliez pas d'ajouter des points-virgules (;) après chaque propriété.


Bouton d'envoi avec effet de survol

Suivez les étapes ci-dessus pour modifier votre bouton d'envoi. La seule chose qui change, c'est le code.

Exemple CSS3 pour un bouton d'envoi:

.form-submit-button {

background: #B9DFFF;

color: #fff;

border: 1px solid #eee;

border-radius: 20px;

box-shadow: 5px 5px 5px #eee;

text-shadow:none;

}


.form-submit-button:hover {

background: #016ABC;

color: #fff;

border: 1px solid #eee;

border-radius: 20px;

box-shadow: 5px 5px 5px #eee;

text-shadow:none;

}


Voici à quoi ça ressemble.



Et au survol de la souris:



Explication du code CSS

.form-submit-button:hover - Il s'agit de la classe lorsque la souris est placée sur le bouton d’envoi. Tous les autres champs restent les mêmes, sauf l'arrière-plan pour montrer ce qui se passe au survol de la souris.

border-radius - Arrondit le coin du bouton d'envoi.

box-shadow - Définit l'ombre du bouton d'envoi.

text-shadow (non appliqué à l'exemple) - Définit une ombre pour le texte à l'intérieur de votre bouton d'envoi.


Et vous, qu'avez-vous créé? Partagez vos idées et suggestions dans la section commentaires ci-dessous.



Envoyer un commentaire