3D Flip button HTML & CSS

3D Flip button HTML & CSS

3D flip button with CSS | Botón con efecto Flip con CSS

BY Sean Michael


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


HTML

<a href="#id" class="flipper-container">
<div id="id" class="flipper">
<div class="front-face" data-icon="&#x27a3;"><span data-hover="Clicked">Click Me</span></div>
<div class="back-face" data-icon="&#10003;">Thank You</div>
</div>
</a>

CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400);body{background-color:#777;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAU0lEQVQIHQXBwRGDIBAAwO2/AMcCDHAcPjIRxjJ8Je1kl1uqUgphsWu6w0sIG6npLpcUBql4e/wsVRKabrkNTacIYbMrwsF06rqUhsnXVKVT+Hj+Ue4rPSONk4kAAAAASUVORK5CYII=);padding-top:80px;text-align:center}.flipper-container{text-align:center;margin-top:40px;-moz-perspective:1000;-webkit-perspective:1000;perspective:1000}.flipper{display:inline-block;position:relative;text-decoration:none;font-family:Montserrat,arial,sans-serif;font-weight:400;text-transform:uppercase;width:11em;height:4.5em;background-color:#282828;box-shadow:0 3px 5px #282828;-moz-transition:all .6s cubic-bezier(0.37,.74,.15,1.65);-o-transition:all .6s cubic-bezier(0.37,.74,.15,1.65);-webkit-transition:all .6s cubic-bezier(0.37,.74,.15,1.65);transition:all .6s cubic-bezier(0.37,.74,.15,1.65);-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.flipper:target{-moz-transform:rotateX(90deg);-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}.back-face,.front-face{position:absolute;width:100%;height:100%;top:0;left:0;padding-right:70px;letter-spacing:2px;line-height:4.5em;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}.back-face:before,.front-face:before{content:attr(data-icon);font-size:30px;position:absolute;top:0;right:0;height:100%;width:70px;border-radius:0 2px 2px 0}.front-face{background-color:#fc2161;color:#fff;text-shadow:0 1px 1px #b50236;-moz-transform:rotateX(0deg) translateZ(2.25em);-ms-transform:rotateX(0deg) translateZ(2.25em);-webkit-transform:rotateX(0deg) translateZ(2.25em);transform:rotateX(0deg) translateZ(2.25em)}.front-face:before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlMDMzZSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWIxZjU2Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmOTE4NTgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYzIxNjEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=);background-size:100%;background-image:-moz-linear-gradient(45deg,#ce033e 0,#eb1f56 50%,#f91858 50%,#fc2161);background-image:-webkit-linear-gradient(45deg,#ce033e 0,#eb1f56 50%,#f91858 50%,#fc2161);background-image:linear-gradient(45deg,#ce033e 0,#eb1f56 50%,#f91858 50%,#fc2161)}.back-face{background-color:#77BD42;color:#53842e;-moz-transform:rotateX(-90deg) translateZ(2.25em);-ms-transform:rotateX(-90deg) translateZ(2.25em);-webkit-transform:rotateX(-90deg) translateZ(2.25em);transform:rotateX(-90deg) translateZ(2.25em)}.back-face:before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzODQyZSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNzZiYzQyIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM3ZGJkNGMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3N2JkNDIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=);background-size:100%;background-image:-moz-linear-gradient(45deg,#53842e 0,#76bc42 50%,#7dbd4c 50%,#77bd42);background-image:-webkit-linear-gradient(45deg,#53842e 0,#76bc42 50%,#7dbd4c 50%,#77bd42);background-image:linear-gradient(45deg,#53842e 0,#76bc42 50%,#7dbd4c 50%,#77bd42)}
¿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