Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie formatiere ich ein Kontrollkästchen als Schaltfläche mit Hover-Effekt?

Mary-Kate Olsen
Freigeben: 2024-10-30 03:32:28
Original
850 Leute haben es durchsucht

How to Style a Checkbox as a Button with a Hover Effect?

Ein Kontrollkästchen mit Hover-Effekt so gestalten, dass es einer Schaltfläche ähnelt

Beim Anpassen eines Kontrollkästchens so, dass es wie eine Schaltfläche aussieht und seine Interaktivität mit einem Hover verbessert wird Wirkung kann wünschenswert sein. Erreichen Sie dies mit den folgenden Schritten:

Ändern Sie Ihr CSS so, dass es Folgendes enthält:

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

Erklärung:

Diese CSS-Regel zielt auf # ck-button-Element beim Schweben und ändert seine Hintergrundfarbe in Rot.

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

Mit diesem Zusatz , Ihr Kontrollkästchen wechselt jetzt zu einem roten Hintergrund, wenn Sie mit der Maus darüber fahren, was eine intuitivere Benutzererfahrung bietet.

Das obige ist der detaillierte Inhalt vonWie formatiere ich ein Kontrollkästchen als Schaltfläche mit Hover-Effekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage