Wie gestalte ich ein Kontrollkästchen so, dass es mit einem Hover-Effekt wie eine Schaltfläche aussieht?

Ein Kontrollkästchen so gestalten, dass es wie eine Schaltfläche mit Hover-Effekt aussieht

Das Erstellen benutzerdefinierter UI-Elemente kann die Benutzererfahrung verbessern. In diesem Fall möchten Sie ein Kontrollkästchen durch ein schaltflächenähnliches Erscheinungsbild ersetzen und zusätzlich einen Hover-Effekt implementieren, um die Interaktion zu verbessern.

Die HTML-Struktur:

<code class="html"><div id="ck-button">
   <label>
      <input type="checkbox" value="1"><span>red</span>
   </label>
</div></code>

Die CSS-Stile:

Um das Kontrollkästchen als Schaltfläche zu gestalten und den Hover-Effekt zu implementieren, können Sie das folgende CSS verwenden:

<code class="css">div label input {
   margin-right:100px;
}

body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}

#ck-button:hover {
    background:red;
}</code>

Hover-Styling:

Der Schlüssel zum Hinzufügen des Hover-Effekts ist das folgende CSS:

<code class="css">#ck-button:hover {
    background:red;
}</code>

Dies gibt an, wenn der Benutzer mit der Maus über das Kontrollkästchen im Schaltflächenstil fährt , der Hintergrund wechselt zu Rot.

Live-Beispiel:

Sehen Sie sich das Live-Beispiel in der folgenden Geige an:

http://jsfiddle. net/zAFND/4/

Das obige ist der detaillierte Inhalt vonWie gestalte ich ein Kontrollkästchen so, dass es mit einem Hover-Effekt wie eine Schaltfläche aussieht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!