-
Notifications
You must be signed in to change notification settings - Fork 0
/
switch_button.css
110 lines (110 loc) · 3.26 KB
/
switch_button.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
background-color: #1c1d1f;
}
.button {
display: block;
width: 400px;
height: 120px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #000000;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button span {
display: block;
position: absolute;
top: 6px;
width: 194px;
height: 108px;
background-color: #1c1d1f;
transition: transform 300ms ease, box-shadow 300ms ease;
}
.button span:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Open Sans";
font-weight: 800;
font-size: 48px;
transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;
}
.button span:after {
content: "";
width: 4px;
height: 108px;
position: absolute;
top: 0;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
transition: opacity 300ms ease;
}
.button span:first-of-type {
left: 6px;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
transform-style: preserve3d;
transform-origin: right center;
transform: perspective(2000px) rotatey(40deg);
box-shadow: -1px 0 1px rgba(255, 255, 255, 0.1) inset, 4px 0 8px rgba(255, 255, 255, 0.1) inset, 1px 0 0 rgba(255, 255, 255, 0.1) inset, -10px 0 8px rgba(40, 42, 44, 0.9), -20px 0 8px rgba(28, 29, 31, 0.7), -30px 0 8px rgba(28, 29, 31, 0.4);
}
.button span:first-of-type:before {
content: "ON";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f;
}
.button span:first-of-type:after {
left: -1px;
}
.button span:last-of-type {
right: 6px;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
transform-origin: left center;
box-shadow: -1px 1px 1px rgba(255, 255, 255, 0.1) inset, 2px 0 2px rgba(255, 255, 255, 0.05) inset;
}
.button span:last-of-type:before {
content: "OFF";
color: #ff4847;
text-shadow: 0 0 24px rgba(255, 72, 71, 0.6);
}
.button span:last-of-type:after {
right: -1px;
opacity: 0;
}
.button input[type="checkbox"] {
display: none;
}
.button input[type="checkbox"]:checked ~ span:first-of-type {
transform: none;
box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1) inset, -2px 0 2px rgba(255, 255, 255, 0.05) inset;
}
.button input[type="checkbox"]:checked ~ span:first-of-type:before {
color: #93c913;
text-shadow: 0 0 24px rgba(147, 201, 19, 0.6);
}
.button input[type="checkbox"]:checked ~ span:first-of-type:after {
opacity: 0;
}
.button input[type="checkbox"]:checked ~ span:last-of-type {
transform: perspective(2000px) rotatey(-40deg);
box-shadow: 1px 0 1px rgba(255, 255, 255, 0.1) inset, -4px 0 8px rgba(255, 255, 255, 0.1) inset, -1px 0 0 rgba(255, 255, 255, 0.1) inset, 10px 0 8px rgba(40, 42, 44, 0.9), 20px 0 8px rgba(28, 29, 31, 0.7), 30px 0 8px rgba(28, 29, 31, 0.4);
}
.button input[type="checkbox"]:checked ~ span:last-of-type:before {
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f;
}
.button input[type="checkbox"]:checked ~ span:last-of-type:after {
opacity: 1;
}