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

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%;

}

/* Center */

.center:hover {

  color: #6477b9;

}

.center::before, .center::after {

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

  -webkit-transform: scale3d(1, 1, 1);

          transform: scale3d(1, 1, 1);

  -webkit-transition: -webkit-transform 0.5s;

  transition: -webkit-transform 0.5s;

  transition: transform 0.5s;

  transition: transform 0.5s, -webkit-transform 0.5s;

}