DEV Community

ForGetFulSkyBro
ForGetFulSkyBro

Posted on

 

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

Top comments (0)

Regex for lazy developers

regex for lazy devs

You know who you are. Sorry for the callout 😆