basic
icon
text
alert("Thanks all that liked this code, it's one of my favorite codes and i'm glad tha everyone else likes it too! It's also my highest upvote code I have too! '")
————————————————————————-HTML Above———————————————————————————————————————————————
@import url(https://fonts.googleapis.com/css?family=Lato:400,900);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css);
- { font-family: inherit; -webkit-font-smoothing: antialiased; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
html {
font-size: 62.5%;
font-family: 'Lato', sans-serif;
}
body {
background: #243142;
padding: 20px 0 0;
}
p {
color: #B8C7DB;
text-align: center;
font-size: 1.5rem;
margin: 30px auto 12px;
}
.flip-switch {
display: block;
height: 35px;
width: 62px;
background: #182029;
padding: 3px 0 0;
margin: 0 auto;
perspective: 50px;
-webkit-perspective: 50px;
-moz-perspective: 50px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
.flip-switch input {
opacity: 0;
position: absolute;
top: 0;
right: 100%;
width: 1px;
height: 1px;
}
.flip-switch label {
display: block;
position: relative;
height: 32px;
width: 56px;
outline: none;
margin: 0 auto;
-webkit-appearance: none;
background: none;
border: none;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
border-radius: inherit;
-webkit-border-radius: inherit;
-moz-border-radius: inherit;
animation: uncheck 0.6s ease-out;
-webkit-animation: uncheck 0.6s ease-out;
-moz-animation: uncheck 0.6s ease-out;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
.flip-switch label:before, .flip-switch label:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: inherit;
width: inherit;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
border-radius: inherit;
-webkit-border-radius: inherit;
-moz-border-radius: inherit;
text-align: center;
}
.flip-switch label:before {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
background: #E65757;
}
.flip-switch label:after {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
background: #77E371;
}
.flip-switch input:checked + label {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
animation: check 0.6s ease-out;
-webkit-animation: check 0.6s ease-out;
-moz-animation: check 0.6s ease-out;
}
.flip-switch.flip-switch-icon label:before, .flip-switch.flip-switch-icon label:after {
font-family: 'FontAwesome';
color: white;
font-size: 2rem;
line-height: 32px;
}
.flip-switch.flip-switch-icon label:before {
content: '\f00d';
}
.flip-switch.flip-switch-icon label:after {
content: '\f00c';
}
.flip-switch.flip-switch-text label:before, .flip-switch.flip-switch-text label:after {
color: white;
line-height: 32px;
font-weight: 900;
font-size: 1.3rem;
}
.flip-switch.flip-switch-text label:before {
content: 'OFF';
}
.flip-switch.flip-switch-text label:after {
content: 'ON';
}
@keyframes check {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(195deg);
}
75% {
transform: rotateY(165deg);
}
100% {
transform: rotateY(180deg);
}
}
@-webkit-keyframes check {
0% {
-webkit-transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(195deg);
}
75% {
-webkit-transform: rotateY(165deg);
}
100% {
-webkit-transform: rotateY(180deg);
}
}
@-moz-keyframes check {
0% {
-moz-transform: rotateY(0deg);
}
50% {
-moz-transform: rotateY(195deg);
}
75% {
-moz-transform: rotateY(165deg);
}
100% {
-moz-transform: rotateY(180deg);
}
}
@keyframes uncheck {
0% {
transform: rotateY(180deg);
}
50% {
transform: rotateY(-15deg);
}
75% {
transform: rotateY(15deg);
}
100% {
transform: rotateY(0deg);
}
}
@-webkit-keyframes uncheck {
0% {
-webkit-transform: rotateY(180deg);
}
50% {
-webkit-transform: rotateY(-15deg);
}
75% {
-webkit-transform: rotateY(15deg);
}
100% {
-webkit-transform: rotateY(0deg);
}
}
@-moz-keyframes uncheck {
0% {
-moz-transform: rotateY(180deg);
}
50% {
-moz-transform: rotateY(-15deg);
}
75% {
-moz-transform: rotateY(15deg);
}
100% {
-moz-transform: rotateY(0deg);
}
}
————————————————————————————————-CSS Above————————————————————————————————————————
Photos of the code: https://thepracticaldev.s3.amazonaws.com/i/z5f9j0z8u9gp5oxd70rj.png
https://thepracticaldev.s3.amazonaws.com/i/514165lo7mssoi6cy9mc.png
https://thepracticaldev.s3.amazonaws.com/i/7eem2z9inlg0b33wylk4.png
Top comments (0)