Welche Zustände haben Schaltflächen in CSS?-CSS-Tutorial-php.cn

Welche Zustände haben Schaltflächen in CSS?

藏色散人

Freigeben： 2018-08-15 15:45:06

Original

6564 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!