Flip icono Check with CSS

Flip icono Check with CSS

Flip icono Check with CSS | Flip básico, icono o texto solo con Css y html BY Ian Turner


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


HTML

<p>basic</p><p>basic</p> <div class="flip-switch"> <input type="checkbox" id="c1"> <label for="c1"></label> </div>
 <p>icon</p> <div class="flip-switch flip-switch-icon"> <input type="checkbox" id="c2"> <label for="c2"></label> </div>
 <p>text</p> <div class="flip-switch flip-switch-text"> <input type="checkbox" id="c3"> <label for="c3"></label> </div>
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:0;margin:0 auto;-webkit-appearance:none;background:0 0;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 .6s ease-out;-webkit-animation:uncheck .6s ease-out;-moz-animation:uncheck .6s ease-out;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}
.flip-switch label:after,.flip-switch label:before{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 .6s ease-out;-webkit-animation:check .6s ease-out;-moz-animation:check .6s ease-out}
.flip-switch.flip-switch-icon label:after,.flip-switch.flip-switch-icon label:before{font-family:FontAwesome;color:#fff;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:after,.flip-switch.flip-switch-text label:before{color:#fff;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)}}
¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D

Recibe las últimas actualizaciones