Heim > Artikel > Web-Frontend > Welche Zustände haben Schaltflächen in CSS?

Welche Zustände haben Schaltflächen in CSS?

藏色散人Original: 2018-08-15 15:45:066537Durchsuche

Dieser Artikel führt Sie hauptsächlich in die verschiedenen Zustände von CSS-Schaltflächen ein. Ich hoffe, es hilft Freunden in Not.

Zunächst gebe ich Ihnen ein Beispiel für den Statuscode der Schaltfläche wie folgt:

<!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>

Der obige Code kann für lokale Tests und die Wirkung direkt kopiert und eingefügt werden lautet wie folgt:

Welche Zustände haben Schaltflächen in CSS?

Zusammenfassend möchte ich die verschiedenen Zustände von Schaltflächen zusammenfassen:

Normaler Zustand
Hover-Maus-Hover-Status
aktiver Klickstatus
Focus erhält den Fokusstatus

Hinweis: .btn:focus{outline:0;} kann das Blau entfernen Rahmen nach dem Klicken auf die Schaltfläche oder eine Beschriftung

Das Cursor-Attribut gibt den Typ (die Form) des anzuzeigenden Cursors an. Dieses Attribut definiert die Cursorform, die verwendet wird, wenn der Mauszeiger innerhalb der Grenzen eines Elements platziert wird

: Der aktive Selektor wird zum Auswählen aktiver Links verwendet. Wenn Sie auf einen Link klicken, wird dieser aktiv (aktiviert).

Ich hoffe, dass die Einführung dieses Artikels in verschiedene Situationen des Knopfstatus für Freunde in Not hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonWelche Zustände haben Schaltflächen in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css 指针选择器

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Können CSS-Mausstile angepasst werden (Beispiele für mehrere Stile)?Nächster Artikel：Können CSS-Mausstile angepasst werden (Beispiele für mehrere Stile)?

In Verbindung stehende Artikel

Mehr sehen