Exemple 01: Utilisation de CSS pour faire en sorte qu'un bouton produit un effet de rebond dans un fichier HTML
Dans cet exemple, nous utiliserons STYLE TAG CSS pour faire transformer un bouton en un effet de clic. Nous nous concentrerons sur l'effet après effort d'un clic sur le bouton et animer le bouton pour produire un effet de clic.
Nous avons ouvert une balise de style dans l'en-tête du fichier dans lequel nous définirons le style du bouton dans une classe séparée qui peut être appelée dans n'importe quelle balise de bouton à travers le fichier. Nous ouvrirons la parenthèse après avoir donné un nom à la classe. Ensuite, nous commencerons par lui donner un rembourrage (en pixels) pour ajuster le bouton de la page. Ensuite, nous donnerons la couleur du fond du bouton. Après cela, la propriété Box-Shadow sera utilisée. La valeur comprendrait le format pixel pour l'ombre et le format RGBA pour la couleur de l'ombre. Ensuite, nous donnerons au bouton un curseur de pointeur. Lorsque le bouton sera cliqué, le curseur sera transformé en raison de cette propriété. La dernière propriété sera la propriété de transition qui spécifiera le temps de réaction de l'animation de bouton.
Après la fermeture de la parenthèse, nous classerons une autre fonction pour cette classe séparément. Dans cette fonction, nous spécifierons l'échelle de transformation et le changement dans l'ombre de la bordure en utilisant le même format que nous avons utilisé plus tôt. Après cela, nous ouvrirons l'étiquette corporelle et lui donnerons un cap et un bouton. Dans la balise de bouton, nous mentionnerons le nom de la classe que nous venons de créer dans la balise de style présente dans l'en-tête du fichier.
Nous pouvons voir que le bouton dans la sortie ci-dessus a une ombre et que le rembourrage est visible. Bien que l'animation serait plus visible dans le navigateur, mais le style est plus visible dans l'extrait ci-dessus.
Exemple 02: Utilisation de CSS pour faire rebondir un bouton dans un fichier HTML
Dans cet exemple, nous utiliserons les balises de style CSS pour faire rebondir un bouton lorsque vous cliquez sur. Nous nous concentrerons sur le résultat d'un bouton cliquer et animer le bouton pour produire un effet de rebond.
Dans le script ci-dessus, nous avons ouvert une balise de style dans l'en-tête du fichier pour spécifier le style du bouton. Le style du bouton est stocké dans une classe distincte qui peut être utilisée dans n'importe quelle balise de bouton tout au long du projet. Après avoir donné un nom de classe, nous ouvrirons les parenthèses de la classe. Tout d'abord, nous donnerons au bouton un curseur de pointeur afin que lorsqu'il soit cliqué, le curseur change. Ensuite, nous ajouterons un rembourrage (en pixels) pour modifier la position du bouton sur la page. Enfin, nous définirons la couleur d'arrière-plan du bouton. Suite à cela, la propriété Box-Shadow sera utilisée avec la valeur composée de format de pixel pour le format Shadow et RGBA pour la couleur de l'ombre. Nous allons également l'aligner.
Après avoir fermé les parenthèses de la classe, nous classerons une autre fonction pour cette classe.Nous spécifierons l'échelle de transformation et les changements dans l'ombre de la frontière dans le même format que nous avons utilisé dans la propriété précédente. Après cela, nous ouvrirons l'étiquette corporelle et y ajouterons un cap et un bouton. Dans notre balise de bouton, nous déclarerons le nom de la classe que nous venons de construire dans la balise de style dans l'en-tête de notre fichier.
Nous pouvons voir que le bouton dans la capture d'écran ci-dessus a tout le style que nous avons spécifié dans le style et l'animation de clic sur le bouton serait perceptible dans le navigateur.
Exemple 03: Utilisation de CSS pour transformer la couleur du bouton après avoir cliqué dessus
Dans cet exemple, nous changerons la couleur d'un bouton lorsqu'il sera cliqué. Nous utiliserons CSS dans cet exemple et tout le style sera défini dans la balise de style pour l'élément bouton.
Dans le script ci-dessus, nous ouvrirons une balise de style dans l'en-tête du fichier. Ensuite, nous définirons les propriétés de style pour le bouton par défaut que le langage de balisage hypertexte fournit. Dans la balise de style, nous commencerons par donner au bouton de la couleur du fond jaune. Après cela, nous appellerons la classe Button avec la propriété Focus Transition et dans ses parenthèses. Nous définirons la couleur d'arrière-plan qui sera différente de la couleur d'arrière-plan précédemment définie. Cela entraînera un changement de couleur lorsque le bouton sera cliqué.
Nous allons maintenant ouvrir ce fichier HTML sur notre navigateur et observer la transformation du bouton.
Dans cet extrait, nous pouvons voir que le bouton a le style défini dans la première propriété de la balise de style, et lorsque nous cliquons dessus, nous obtenons la sortie suivante:
Le bouton s'est transformé après le clic et la couleur est désormais rouge comme défini dans la parenthèse de mise au point du bouton.
Exemple 04: Utilisation de CSS pour modifier la forme d'un bouton après avoir cliqué dessus
Lorsqu'un bouton est cliqué, nous modifierons sa forme dans cet exemple. Dans cet exemple, nous appliquerons CSS. Tout le style sera défini dans la balise de style pour l'élément bouton. La propriété de mise au point du bouton qui entraînera la modification de la forme et de la couleur du bouton.
Nous ouvrirons une balise de style dans l'en-tête du fichier et fournirons les propriétés de style pour le bouton par défaut fourni par la langue de balisage hypertexte dans le script ci-dessus. Dans la balise de style, nous commencerons par rendre l'arrière-plan du bouton rouge et attribuer une taille au texte par la propriété de taille de police. Après cela, nous appellerons la classe de bouton avec la propriété de transition Focus et définirons la couleur d'arrière-plan. Il sera différent de la couleur d'arrière-plan précédemment indiquée, qui est violet. Ensuite, nous ajouterons la propriété Border-Radius et lui attribuerons une valeur en pixels. Ainsi, lorsque le bouton est cliqué, la forme et la couleur changent.
La sortie ci-dessus montre l'état du bouton avant qu'il ne clique sur. Le bouton a une bordure rectangulaire avec un fond rouge et si nous cliquons sur le bouton, nous obtiendrons la sortie ci-dessous:
Nous pouvons maintenant voir la transformation de la couleur et de la forme du bouton car la bordure a des bords arrondis et un fond violet.
Conclusion
Dans cet article, nous avons examiné différents exemples que CSS nous permet de créer un effet sur un élément de bouton du langage de balisage hypertexte lorsqu'il est cliqué. Nous avons utilisé l'approche de la balise de style pour ajouter CSS à l'élément bouton de cet article. Nous nous sommes concentrés sur la transformation de la couleur, de la forme et de l'ombre du bouton et avons même ajouté quelques animations au bouton lorsqu'il sera cliqué. Nous avons utilisé le bloc-notes ++ IDE pour implémenter ces exemples dans cet article.