Botones con efectos hover

Stylized Buttons with css| Botones con css y html para tu blog o página web

By Paraskevas Dinakis

HTML

<div class="btn from-top">Button Top</div>
<div class="btn from-left">Button Left</div>
<div class="btn from-right">Button Right</div>
<div class="btn from-middle">Button Middle</div>
<div class="btn from-bottom">Button Bottom</div>
CSS

.btn{position:relative;padding:1.4rem 3.1rem 1.4rem 4.2rem;font-size:1.4rem;color:var(--inv);letter-spacing:1.1rem;text-transform:uppercase;transition:all 600ms cubic-bezier(0.77,0,.175,1);cursor:pointer;user-select:none}
.btn:after,.btn:before{content:'';position:absolute;transition:inherit;z-index:-1}
.btn:hover{color:var(--def);transition-delay:.6s}
.btn:hover:before{transition-delay:0s}
.btn:hover:after{background:var(--inv);transition-delay:.4s}
.from-top:after,.from-top:before{left:0;height:0;width:100%}
.from-top:before{bottom:0;border:1px solid var(--inv);border-top:0;border-bottom:0}
.from-top:after{top:0;height:0}
.from-top:hover:after,.from-top:hover:before{height:100%}
.from-left:after,.from-left:before{top:0;width:0;height:100%}
.from-left:before{right:0;border:1px solid var(--inv);border-left:0;border-right:0}
.from-left:after{left:0}
.from-left:hover:after,.from-left:hover:before{width:100%}
.from-right:after,.from-right:before{top:0;width:0;height:100%}
.from-right:before{left:0;border:1px solid var(--inv);border-left:0;border-right:0}
.from-right:after{right:0}
.from-right:hover:after,.from-right:hover:before{width:100%}
.from-middle:before{top:0;left:50%;height:100%;width:0;border:1px solid var(--inv);border-left:0;border-right:0}
.from-middle:after{bottom:0;left:0;height:0;width:100%;background:var(--inv)}
.from-middle:hover:before{left:0;width:100%}
.from-middle:hover:after{top:0;height:100%}
.from-bottom:after,.from-bottom:before{left:0;height:0;width:100%}
.from-bottom:before{top:0;border:1px solid var(--inv);border-top:0;border-bottom:0}
.from-bottom:after{bottom:0;height:0}
.from-bottom:hover:after,.from-bottom:hover:before{height:100%}
¿Te gusto el post?
¡Compártelo!