html code

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