Maison >interface Web >tutoriel CSS >Quels sont les états des boutons des boutons en CSS ?
Quels sont les états des boutons des boutons en CSS ?
- 藏色散人original
- 2018-08-15 15:45:066599parcourir
Cet article vous présente principalement les différents états des boutons CSS. J'espère que cela aidera les amis dans le besoin.
Tout d'abord, je vais vous donner un exemple du code d'état du bouton comme suit :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>button按钮的状态代码不同效果示例</title>
<style>
.btn{
appearance: none;
background: #026aa7;
color: #fff;
font-size: 20px;
padding: 0.65em 1em;
border-radius: 4px;
box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.2);
margin-right: 1em;
cursor: pointer;
border:0;
}
.btn1:hover{
box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5);
}
.btn1:focus{
position: relative;
top: 4px;
box-shadow: inset 0 3px 5px 0 rgba(0,0,0, 0.2);
outline: 0;
}
.btn2:hover{
box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5);
}
.btn2:active{
position: relative;
top: 4px;
box-shadow: inset 0 3px 5px 0 rgba(0,0,0,0.2);
outline: 0;
}
.btn2:focus{
outline: 0;
}
</style>
</head>
<body>
<button class="btn btn1">点击不会弹起</button>
<button class="btn btn2">点击会弹起</button>
</body></html>Le code ci-dessus peut être directement copié et collé pour des tests locaux, et l'effet est le suivant :
Pour résumer, permettez-moi de résumer les différents états des boutons :
-
État normal
état de survol de la souris
état de clic actif
-
focus obtient l'état de focus
Remarque : .btn:focus{outline:0;} peut supprimer la bordure bleue après avoir cliqué sur le bouton ou sur une étiquette
cursor précise le type (forme) du curseur à afficher. Cet attribut définit la forme du curseur utilisée lorsque le pointeur de la souris est placé dans les limites d'un élément : Le sélecteur actif permet de sélectionner les liens actifs. Lorsque vous cliquez sur un lien, celui-ci devient actif (activé). J'espère que l'introduction de cet article aux différentes situations d'état des boutons sera utile aux amis dans le besoin.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!