استایل Border انیمیشنی زیبا - CSS Border transitions ( نمونه 2)

html {

background: #fefefe;

}

body {

color: #4b507a;

font: 300 24px/1.5 Lato, sans-serif;

margin: 1em auto;

max-width: 36em;

padding: 1em 1em 2em;

text-align: center;

isolation: isolate;

}

button {

background: none;

border: 0;

box-sizing: border-box;

box-shadow: inset 0 0 0 2px #f45e61;

color: #f45e61;

font-size: inherit;

font-weight: 700;

margin: 1em;

padding: 1em 2em;

text-align: center;

text-transform: capitalize;

position: relative;

vertical-align: middle;

}

button::before, button::after {

box-sizing: border-box;

content: '';

position: absolute;

width: 100%;

height: 100%;

}

/* Draw and Meet */

.draw {

-webkit-transition: color 0.25s;

transition: color 0.25s;

}

.draw::before, .draw::after {

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::before, .draw:hover::after {

width: 100%;

height: 100%;

}

.draw:hover::before {

border-top-color: #60daaa;

border-right-color: #60daaa;

-webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;

transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;

}

.draw:hover::after {

border-bottom-color: #60daaa;

border-left-color: #60daaa;

-webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;

transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.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 0.25s ease-out, width 0.25s ease-out 0.25s;

transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;

}

سون لرن • آموزش...