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

در این مطلب و مطالب بعدی تعدادی کد و نمونه زیبا برای Border انیمیشنی خدمتتون میزارم که میتونین از اونا برای زیبایی سایتتون استفاده کنید. زمانی که بر روی این دکمه‌ها هاور میکنید، Border اونا بصورتهای مختلفی عکس العمل نشون میده و رنگش تغییر میکنه.

کد HTML :

<button class="draw">draw</button>

کد CSS :

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 */
.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;
}

امیدوارم خوشتون بیاد.

موفق باشید. یا علی

Source

نویسنده

محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.