Πώς να δημιουργήσετε: Κουμπί εναλλαγής

Πώς να δημιουργήσετε διακόπτες εναλλαγής

Βήμα 1 - Προσθήκη HTML:

/* ορθογώνιος διακόπτης */
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
/* στρογγυλεμένος διακόπτης */
<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

Βήμα 2 - Προσθήκη CSS:

/* πλαίσιο κουμπιού κύλισης */
.switch {
  θέση: σχετική;
  προσθήκη: γραμμή;
  πλάτος: 60px;
  ύψος: 34px;
{}
/* κρυφή κουμπιά HTML */
.switch input {
  διαφάνεια: 0;
  πλάτος: 0;
  ύψος: 0;
{}
/* κουμπί κύλισης */
.slider {
  θέση: αμετάβλητη;
  αποστολή-αυτοκινήτη: αλληλεπιδρασία;
  άνω: 0;
  αριστερά: 0;
  δεξιά: 0;
  κάτω: 0;
  χρώμα-βάθους: #ccc;
  -webkit-μεταβλητές-μεταβλητών: .4s;
  μεταβλητές-μεταβλητών: .4s;
{}
.slider:before {
  θέση: αμετάβλητη;
  περιεχόμενο: "";
  ύψος: 26px;
  πλάτος: 26px;
  αριστερά: 4px;
  κάτω: 4px;
  χρώμα-βάθους: λευκό;
  -webkit-μεταβλητές-μεταβλητών: .4s;
  μεταβλητές-μεταβλητών: .4s;
{}
input:checked + .slider {
  χρώμα-βάθους: #2196F3;
{}
input:focus + .slider {
  σκιές: 0 0 1px #2196F3;
{}
input:checked + .slider:before {
  -webkit-μεταμορφώσεις: πλάτος(26px);
  -ms-μεταμορφώσεις: πλάτος(26px);
  μεταμορφώσεις: πλάτος(26px);
{}
/* στρογγυλεμένος κουμπί κύλισης */
.slider.round {
  πλάτος-γωνία: 34px;
{}
.slider.round:before {
  border-radius: 50%;
{}

Try it yourself