Nút switch mode với CSS

  Bài viết hay nhất1
HTML:

input(type="checkbox")#check
label(for="check").switch
label(for="check").on ON
label(for="check").off OFF


CSS:

@import "bourbon";

@import url(https://fonts.googleapis.com/css?family=Raleway:300,400);

$switch-size: 50px;
$edges: 50%;
$push: 180px;

$bgc: #905468;
$accent: #C2DFE3;
$off: #7D3238;
$on: #3bb143;
$none: #777;

$spacing: 5px;
$touch: 5px;

html,
body {
position: relative;
width: 100%;
height: 100%;
}

body {
background-color: $bgc;
background-image: url(https://i.imgur.com/HWVPDtP.jpg);
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

overflow: hidden;

font-family: 'Raleway';

@include perspective(500px);
}

#check {
display: none;

&:checked ~ .switch {
background-color: #3bb143;
@include transform(rotate(135deg));
}

&:checked ~ .on {
opacity: 1;
@include animation(0.5s spring);
@include animation-delay(0.25s);
color: $on;
}

&:checked ~ .off {
color: $none;
}

&:not(:checked) ~ .off {
opacity: 1;
@include animation(0.5s spring);
@include animation-delay(0.25s);
$color: $off;
}
}

.switch {
margin: auto;
@include position(absolute, 0 0 0 0);
@include box-sizing(border-box);

width: $switch-size;
height: $switch-size;

background-color: $off;

@include border-bottom-radius($edges);
border-top-right-radius: $edges;

border: 5px solid $accent;

box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);

@include transition(all 0.25s ease-in-out);
@include transform(rotate(-45deg));
// Possible alternative animation
//@include transform(rotate(-135deg) rotateY(180deg));

cursor: pointer;
}

.on,
.off {
margin: auto;
@include position(absolute, 0 0 0 0);
width: 80px;
height: 40px;

opacity: 0.5;

background-color: $accent;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.25);

font: {
weight: 300;
size: 1.1em;
}
text-indent: $spacing;
letter-spacing: $spacing;
line-height: 40px;
text-align: center;
color: $none;

cursor: pointer;

@include transition(all 0.25s ease-in-out);
}

.on {
left: $push;
@include border-right-radius($touch);
}

.off {
right: $push;
@include border-left-radius($touch);
color: $off;
}

@include keyframes(spring) {
50% {
top: 10px;
}
}

// 353535-ffffff-96b2c6-905468-7d3238



JS:

// Little bit of switch state randomness, rest is pure CSS

;(function (window, document, undefined) {
var check, RNG;

check = document.getElementById('check');
RNG = Math.round(Math.random());

check.checked = !!RNG;

}(window, document));
Bạn không có quyền trả lời bài viết