En développement Web, les boutons sont les composants clés qui permettent l'interaction des utilisateurs avec le site Web. Les boutons peuvent améliorer l'expérience du développeur et apporter plus de revenus à l'entreprise. De plus, les boutons aident les développeurs à naviguer dans le produit car ils exigent que les utilisateurs convertissent les résultats souhaités.

Dans cet article, nous démontrerons:

• Comment créer / faire un bouton dans HTML?
• Comment cuire le bouton cliqué dans CSS?

Comment créer / faire un bouton dans HTML?

Pour créer / faire un bouton dans HTM, le HTML "»L'élément est utilisé. Pour une démonstration pratique, vous devez consulter les instructions données.

Étape 1: Faites un conteneur «div»

Initialement, faites un «div«Contaiteur en insérant un«" élément. Ensuite, affectez un attribut de classe et allouez un nom pour une utilisation ultérieure.

Étape 2: insérer un titre

Ensuite, utilisez la balise d'en-tête HTML pour insérer un titre. Les utilisateurs peuvent utiliser n'importe quelle balise d'en-tête du «

" au "

" étiqueter. Dans ce scénario, le «

Étape 3: Créez un bouton

Après cela, créez un élément de bouton à l'aide du "" élément. Ensuite, spécifiez le bouton "taper" comme "soumettre»Et intégrez du texte entre la balise de bouton à afficher sur le bouton:

Bouton de style clic

Cliquez sur le bouton

On peut observer que le bouton a été créé avec succès:

Déplacez-vous vers la section suivante pour en savoir plus sur le style du bouton cliqué.

Comment coiffer un bouton cliqué dans CSS?

Il existe différentes pseudo-classes, notamment «:flotter" et ":se concentrer”Utilisé avec des éléments de bouton. En outre, l'utilisateur peut également appliquer les différentes propriétés CSS sur un bouton de style.

Pour styliser un bouton cliqué dans CSS, essayez la procédure suivante.

Étape 1: Conteneur de style «div»

Accéder au "div»Conteneur en utilisant le sélecteur d'attribut et l'attribut. Pour ce faire, le «.contenant du BTN"Est utilisé à cet effet:

.BTN-Container
marge: 60px;
rembourrage: 20px 40px;
Border: RVB en pointillé 3px (47, 7, 224);
hauteur: 150px;
Largeur: 200px;
Align-Items: Centre;

Selon l'extrait de code donné:

• "marge«La propriété aide à ajouter l'espace vide autour de la limite de l'élément.
• "rembourrage”Est ​​utilisé pour spécifier l'espace à l'intérieur de l'élément.
• "hauteur" et "largeur»Les propriétés allouent la taille d'un élément défini.
• "align-items"Est utilisé pour définir l'alignement de l'élément à l'intérieur de l'élément.

Sortir

Étape 2: élément du bouton de style

Accédez à l'élément bouton à l'aide de «bouton»Et appliquez les propriétés indiquées ci-dessous dans l'extrait de code:

bouton
Filtre: Drop-Shadow (5px 8px 9px RGB (42, 116, 126));
hauteur: 50px;
Largeur: 100px;
Color d'arrière-plan: jaune;

Ici:

• "filtre»La propriété est utilisée pour appliquer l'effet visuel sur l'élément défini. Pour ce faire, la valeur de cette propriété est définie comme «secouer drop», Qui est utilisé pour spécifier l'ombre sur l'élément.
• "Couleur de l'arrière plan"Est utilisé pour allouer la couleur à l'arrière de l'élément. Par exemple, la valeur de ceci est spécifiée comme «jaune".

Sortir

Étape 3: Style avec le sélecteur «Hover»

Maintenant, accédez à l'élément de bouton le long du sélecteur pseudo, qui est utilisé pour sélectionner des éléments lorsque l'utilisateur souris sur eux:

Bouton: Hover
Color en arrière-plan: RVB (238, 7, 7);

Pour ce faire, le «Couleur de l'arrière plan"La propriété est utilisée avec la valeur"RVB (238, 7, 7)". Cette couleur ne s'affiche que lorsque l'utilisateur planera sur le bouton.

Sortir

Étape 4: Style avec sélecteur «: Focus»

Maintenant, utilisez le «:se concentrer”Pseudo Selector le long de l'élément bouton, qui est utilisé pour appliquer le style sur l'élément sélectionné lorsque l'utilisateur est ciblé par le clavier ou concentré sur la souris:

Bouton: Focus
Color en arrière-plan: bleu;

Dans ce scénario, le «Couleur de l'arrière plan"Est utilisé avec les valeurs définies comme"bleu".

Vous avez appris la méthode pour styliser le bouton cliqué dans CSS.

Conclusion

Pour styliser le bouton cliqué dans CSS, créez d'abord un bouton en HTML à l'aide du "" élément. Ensuite, accédez aux pseudo-sélecteurs du bouton, tels que «: Hover »et«: Focus»Et appliquez les propriétés CSS, y compris«hauteur "," largeur "," filtre "," fond de fond", et beaucoup plus. Ce message concernait le style du bouton cliqué dans CSS.