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

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>

CSS

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

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);
}

L'effet est le suivant :

bouton2 :

.button{
background-color: rgba(251, 152, 11, 1);  
box-shadow: 0 5px 20px rgba(251, 152, 11, .5);
}

Le l'effet est le suivant :

bouton 3 :

.button {
  background-color: rgba(241, 196, 15, 1);  
  box-shadow: 0 5px 20px rgba(241, 196, 15, .5);
}

L'effet est le suivant :

bouton4 :

.button {
  background-color: rgba(0, 63, 255, 1);  
  box-shadow: 0 5px 20px rgba(0, 63, 255, .5);
}

L'effet est le suivant :

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);
}

L'effet est le suivant :

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;
}

L'effet est le suivant :

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);
}

L'effet est le suivant :

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!