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:066544Durchsuche
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:
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!