3D Social buttons

3D Social buttons – Botones sociales 3D con CSS

BY Xavier


<div id="centrada"> <div id="centrada"> <div class="cube flip-to-top"> <div class="default-state facebook"> <span>Facebook</span> </div> <div class="active-state facebook"> <span><a href="#" target="_blank">SIGUEME</a></span> </div> </div>
 <div class="cube flip-to-top youtube"> <div class="default-state"> <span>Youtube</span> </div> <div class="active-state youtube"> <span><a href="#" target="_blank">SIGUEME</a></span> </div> </div>


<div class="cube flip-to-top twitter"> <div class="default-state"> <span>Twitter</span> </div> <div class="active-state twitter"> <span><a href="#" target="_blank">SIGUEME</a></span> </div> </div>
 <div class="cube flip-to-top"> <div class="default-state linkedin"> <span>Linkedin</span> </div> <div class="active-state linkedin"> <span><a href="#" target="_blank">SIGUEME</a></span> </div> </div> </div>


CSS

a{color:#fff;text-decoration:none}
#centrada{margin:auto;width:20%;font-family:Verdana;font-weight:700;text-transform:uppercase;text-align:center;display:flex;justify-content:center;flex-direction:column;align-items:center;height:100vh}
.utopix{padding-bottom:50px}
.cube{width:100%;height:50px;-webkit-transition:all 250ms ease;-moz-transition:all 250ms ease;-o-transition:all 250ms ease;transition:all 250ms ease;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}
.active-state,.default-state{height:50px}
.cube +.cube{margin:10px 0}
.default-state{-webkit-transform:translateZ(25px);-moz-transform:translateZ(25px);-o-transform:translateZ(25px);-ms-transform:translateZ(25px);transform:translateZ(25px)}
.flip-to-top .active-state{-webkit-transform:rotateX(90deg) translateZ(75px);-moz-transform:rotateX(90deg) translateZ(75px);-o-transform:rotateX(90deg) translateZ(75px);-ms-transform:rotateX(90deg) translateZ(75px);transform:rotateX(90deg) translateZ(75px)}
.flip-to-bottom .active-state{-webkit-transform:rotateX(-90deg) translateZ(-50px);-moz-transform:rotateX(-90deg) translateZ(-50px);-o-transform:rotateX(-90deg) translateZ(-50px);-ms-transform:rotateX(-90deg) translateZ(-50px);transform:rotateX(-90deg) translateZ(-50px)}
.cube.flip-to-top:hover{-webkit-transform:rotateX(-89deg);-moz-transform:rotateX(-89deg);-o-transform:rotateX(-89deg);-ms-transform:rotateX(-89deg);transform:rotateX(-89deg)}
.cube.flip-to-bottom:hover{-webkit-transform:rotateX(89deg);-moz-transform:rotateX(89deg);-o-transform:rotateX(89deg);-ms-transform:rotateX(89deg);transform:rotateX(89deg)}
.cube{text-align:center;margin:0 auto}
.active-state,.default-state{font-size:16px;text-transform:uppercase;color:#fff;line-height:50px;-webkit-transition:background 250ms ease;-moz-transition:background 250ms ease;-o-transition:background 250ms ease;transition:background 250ms ease}
.cube:hover .default-state{background:#000}
.facebook{background:#3b5998}
.twitter{background:#019AD1}
.youtube{background:#D34836}
.linkedin{background:#069}
¿Te gusto el post?
¡Compártelo!

Adblock Detectado

Apoya este sitio desactivando el Adblock para seguir navegando. ¡Gracias!

¡Ya Desactive el Adblock!