Maison > interface Web > tutoriel CSS > le corps du texte

CSS pour obtenir un effet de bouton lumineux (exemple de code)

不言
Libérer: 2018-11-20 11:32:49
original
9547 Les gens l'ont consulté

Nous utilisons souvent des effets de bouton. Dans cet article, nous partagerons avec vous la mise en œuvre d'un bel effet de bouton. Utilisons CSS pour obtenir un effet de bouton lumineux.

Sans plus tard, regardons directement le code

Le code suivant est le code de base pour tous les styles de boutons suivants :

HTML

<a class="button" href="#">Button</a>
Copier après la connexion

CSS

.button {
width:80px;
height:20px;
  display: block;  
  padding: 1em 3.2em;  
  border-radius: 1.6em;  
  color: #fff;  
  font-size: 18px;  
  font-family: &#39;Lato&#39;, sans-serif;  
  font-weight: 700;  
  text-align: center;  
  text-decoration: none;
  }
Copier après la connexion

La couleur de base passe de bouton1 à bouton4 ci-dessous, et la transmission de la couleur du corps du bouton est également ajustée par box-shadow pour décrire l'ombre utilisée pour chaque bouton. Commencez à concevoir des boutons avec des effets de dégradé à partir du bouton 5. Examinons l'implémentation spécifique du code.

bouton1 :

.button {
  background-color: rgba(252, 28, 143, 1);  
  box-shadow: 0 5px 20px rgba(252, 28, 143, .5);
}
Copier après la connexion

L'effet est le suivant :

CSS pour obtenir un effet de bouton lumineux (exemple de code)

bouton2 :

.button{
background-color: rgba(251, 152, 11, 1);  
box-shadow: 0 5px 20px rgba(251, 152, 11, .5);
}
Copier après la connexion

Le l'effet est le suivant :

CSS pour obtenir un effet de bouton lumineux (exemple de code)

bouton 3 :

.button {
  background-color: rgba(241, 196, 15, 1);  
  box-shadow: 0 5px 20px rgba(241, 196, 15, .5);
}
Copier après la connexion

L'effet est le suivant :

CSS pour obtenir un effet de bouton lumineux (exemple de code)

bouton4 :

.button {
  background-color: rgba(0, 63, 255, 1);  
  box-shadow: 0 5px 20px rgba(0, 63, 255, .5);
}
Copier après la connexion

L'effet est le suivant :

CSS pour obtenir un effet de bouton lumineux (exemple de code)

bouton5 :

La base l'apparence est "button4", box-shadow se fait en définissant l'ombre. Changez la position de l'ombre attachée ci-dessous.

.button {
  background-color: rgba(0, 63, 255, 1);  
  box-shadow: 0 0 40px rgba(0, 63, 255, .7);
}
Copier après la connexion

L'effet est le suivant :

CSS pour obtenir un effet de bouton lumineux (exemple de code)

bouton6 :

C'est la case que nous avons ajoutée à la position "bouton4" spécifié par inset-shadow.

.button {
  background-color: rgba(0, 63, 255, 1);  
  box-shadow: 0 5px 20px rgba(0, 63, 255, .5), 0 0 40px rgba(255, 255, 255, .5) inset;
}
Copier après la connexion

L'effet est le suivant :

CSS pour obtenir un effet de bouton lumineux (exemple de code)

bouton 7 : ​​

Utilisez le bouton de type dégradé pour combiner Différentes couleurs et ajustez la combinaison d'angle.

.button {
  background: linear-gradient(-45deg, rgba(87, 225, 181, 1) 0%, rgba(0, 63, 255, 1) 100%);  
  box-shadow: 0 5px 20px rgba(0, 63, 255, .5);
}
Copier après la connexion

L'effet est le suivant :

CSS pour obtenir un effet de bouton lumineux (exemple de code)

Ce qui précède est l'intégralité du contenu de cet article. Pour plus d'autres contenus passionnants, veuillez. reportez-vous au site Web php chinois. Les colonnes Tutoriel vidéo CSS et Tutoriel vidéo CSS3 dans la colonne Tutoriel vidéo ! ! !

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!

Étiquettes associées:
css
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal