Maison > Article > interface Web > 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:066539parcourir

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 :

Quels sont les états des boutons des boutons en CSS ?

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!

css 指针选择器

Déclaration：

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

Article précédent：Les styles de souris CSS peuvent-ils être personnalisés ? (Exemples de styles multiples)Article suivant：Les styles de souris CSS peuvent-ils être personnalisés ? (Exemples de styles multiples)

Articles Liés

Voir plus