Comment créer des boutons avec différents effets via CSS

Une variété d'effets de bouton peuvent être obtenus via CSS. Par exemple, le bouton d'effet de dégradé de couleur peut être défini via l'attribut de dégradé CSS, et le bouton peut. être pressé via box-shadow.

Aujourd'hui, dans cet article, je vais partager comment créer plusieurs styles différents d'effets de boutons, à savoir les boutons de plan, de bordure, de dégradé et d'ombre, ainsi que les boutons de style de pression. Ensuite, dans l'article, nous présenterons en détail comment obtenir cet effet via le code CSS.

Code HTML

<div class="pm">
	<button>平面按钮</button>
</div>

Code de style CSS de base

button{
display: inline-block;
margin: 0 10px 0 0;
padding: 15px 45px;
font-size:20px;
font-family:"Bitter",serif;
line-height: 20px;
appearance: none;
 box-shadow:none;
 border-radius: 0;
}

(1) Boutons CSS de style plat

L'utilisation de boutons de style plat est très populaire maintenant et s'inscrit dans la tendance omniprésente du design plat. , ces boutons de style plat sont superbes. Le code suivant est l'état normal du bouton

.pm button {
  color:#fff;
  background-color:#6496c8;
  border:none;
}

Rendu :

(2 ) Boutons CSS de style bordure

les boutons de style bordure appartiennent à la même catégorie que les boutons plats. La seule différence est que nous utiliserons une bordure au lieu de la couleur d'arrière-plan utilisée pour le bouton plat. Le code suivant est l'état normal du bouton

.pm button {
  color:#444;
 border:5px solid #6496c8;
  background-color: #fff;
}

Rendu :

(3) Dégradé et Boutons CSS de style ombre

Ce bouton de style dégradé et ombre est plus conforme aux effets de bouton que nous avons vus dans le passé. Si vous aimez ceux aux couleurs colorées, les boutons de style dégradé/ombre sont faits pour vous. L'avantage de la création de ce bouton est que ses effets sont tous réalisés en CSS, il peut donc être facilement agrandi ou réduit sans se soucier de perdre la résolution ou de devoir créer une nouvelle image. Le code suivant est l'état normal du bouton

.pm button {
  color:#fff;
  text-align: center;
  box-shadow:inset 0 0 0 1px #e91e637d; 
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, rgb(244,103,34), rgb(197,29,124));
  background: -moz-linear-gradient(right, rgb(244,103,34), rgb(197,29,124)); 
  background: linear-gradient(to right, rgb(244,103,34) , rgb(197,29,124));}
}

Rendu :

(4 ) Boutons CSS de style presse

Ces boutons de style « presse » combinent un design plat et une illusion pour donner à l'utilisateur l'impression d'avoir réellement appuyé sur le bouton. Lorsque l'utilisateur appuie dessus, il semble s'enfoncer dans la page. Sa mise en œuvre nécessite l'utilisation d'ombres pour le configurer afin de lui donner une apparence pop-up 3D. Le code suivant est l'état normal du bouton

.pm button {
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px #27496d;
}

Rendu :

Résumé : Voilà pour cet article C'est tout le contenu de l'article. J'espère qu'à travers cet article, tout le monde pourra apprendre à utiliser CSS pour créer des effets de boutons.

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!