استایل 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;

}