Maison > interface Web > tutoriel CSS > Comment créer un effet de type bouton avec un changement de style à la sortie en CSS ?

Comment créer un effet de type bouton avec un changement de style à la sortie en CSS ?

Mary-Kate Olsen
Libérer: 2024-11-02 23:12:30
original
1003 Les gens l'ont consulté

How to Create a Button-like Effect with a Style Change on Release in CSS?

Sélecteur de bouton enfoncé

En CSS, vous pouvez utiliser la pseudo-classe :active pour styliser les éléments sur lesquels vous cliquez et maintenez votre doigt. Cependant, ce comportement n'est pas idéal pour les boutons, car le style du bouton ne changera que lorsqu'il est maintenu enfoncé.

Pour obtenir l'effet souhaité, à savoir que le bouton change de style après avoir été enfoncé et relâché, vous pouvez utiliser un tag au lieu d'un bouton :

CSS :

<code class="css">a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}</code>
Copier après la connexion

HTML :

<code class="html"><a id="btn" href="#btn">Demo</a></code>
Copier après la connexion

Ce code crée un lien qui se comporte comme un bouton. Lorsque l'on clique sur le lien, son style passe au vert. Ensuite, lorsque le bouton de la souris est relâché, le style du lien passe au rouge.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal