CSS Border Transitions

Button with border transition ✔ Botones con transiciones【CSS】

CSS Buttons botonesCSS Border transitions | Border con transiciones solo con CSS

By Giana


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


DEMO
HTML

<section class="buttons">
<button class="draw">Draw</button>

<button class="draw meet">Draw Meet</button>

<button class="center">Center</button>

<button class="spin">Spin</button>

<button class="spin circle">Spin Circle</button>

<button class="spin thick">Spin Thick</button>
</section>

CSS

button{background:0 0;border:0;box-sizing:border-box;margin:1em;padding:1em 2em;box-shadow:inset 0 0 0 5px #fff;color:#fff;font-size:inherit;font-weight:700;position:relative;vertical-align:middle}
button::after,button::before{box-sizing:inherit;content:'';position:absolute;width:100%;height:100%;box-shadow:inset 0 0 0 5px}
.draw{-webkit-transition:color .25s;transition:color .25s}
.draw::after,.draw::before{border:2px solid transparent;width:0;height:0}
.draw::before{top:0;left:0}
.draw::after{bottom:0;right:0}
.draw:hover{color:#60daaa}
.draw:hover::after,.draw:hover::before{width:100%;height:100%}
.draw:hover::before{border-top-color:#60daaa;border-right-color:#60daaa;-webkit-transition:width .25s ease-out,height .25s ease-out .25s;transition:width .25s ease-out,height .25s ease-out .25s}
.draw:hover::after{border-bottom-color:#60daaa;border-left-color:#60daaa;-webkit-transition:border-color 0s ease-out .5s,width .25s ease-out .5s,height .25s ease-out .75s;transition:border-color 0s ease-out .5s,width .25s ease-out .5s,height .25s ease-out .75s}
.meet:hover{color:#fbca67}
.meet::after{top:0;left:0}
.meet:hover::before{border-top-color:#fbca67;border-right-color:#fbca67}
.meet:hover::after{border-bottom-color:#fbca67;border-left-color:#fbca67;-webkit-transition:height .25s ease-out,width .25s ease-out .25s;transition:height .25s ease-out,width .25s ease-out .25s}
.center:hover{color:#00a9fa}
.center::after,.center::before{top:0;left:0;height:100%;width:100%;-webkit-transform-origin:center;transform-origin:center}
.center::before{border-top:2px solid #6477b9;border-bottom:2px solid #6477b9;-webkit-transform:scale3d(0,1,1);transform:scale3d(0,1,1)}
.center::after{border-left:2px solid #6477b9;border-right:2px solid #6477b9;-webkit-transform:scale3d(1,0,1);transform:scale3d(1,0,1)}
.center:hover::after,.center:hover::before{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}
.spin{width:5em;height:5em;padding:0}
.spin:hover{color:#0eb7da}
.spin::after,.spin::before{top:0;left:0}
.spin::before{border:2px solid transparent}
.spin:hover::before{border-top-color:#0eb7da;border-right-color:#0eb7da;border-bottom-color:#0eb7da;-webkit-transition:border-top-color .15s linear,border-right-color .15s linear .1s,border-bottom-color .15s linear .2s;transition:border-top-color .15s linear,border-right-color .15s linear .1s,border-bottom-color .15s linear .2s}
.spin::after{border:0 solid transparent}
.spin:hover::after{border-top:2px solid #0eb7da;border-left-width:2px;border-right-width:2px;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-transition:border-left-width 0s linear .35s,-webkit-transform .4s linear 0s;transition:border-left-width 0s linear .35s,-webkit-transform .4s linear 0s;transition:transform .4s linear 0s,border-left-width 0s linear .35s;transition:transform .4s linear 0s,border-left-width 0s linear .35s,-webkit-transform .4s linear 0s}
.circle{border-radius:100%;box-shadow:none}
.circle::after,.circle::before{border-radius:100%}
.thick{color:#fff}
.thick:hover{color:#fff;font-weight:700}
.thick::before{border:2.5em solid transparent;z-index:-1}
.thick::after{mix-blend-mode:color-dodge;z-index:-1}
.thick:hover::before{background:#29007a;border-top-color:#29007a;border-right-color:#29007a;border-bottom-color:#29007a;-webkit-transition:background 0s linear .4s,border-top-color .15s linear,border-right-color .15s linear .15s,border-bottom-color .15s linear .25s;transition:background 0s linear .4s,border-top-color .15s linear,border-right-color .15s linear .15s,border-bottom-color .15s linear .25s}
.thick:hover::after{border-top:2.5em solid #29007a;border-left-width:2.5em;border-right-width:2.5em}
html{background:#fefefe}
body{background-image:linear-gradient(to right,#434343 0,#000 100%);color:#fff;font:300 24px/1.5 Lato,sans-serif;padding:1em 1em 2em;text-align:center}
.buttons{isolation:isolate}
h1{font-weight:300;font-size:2.5em}
¿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