CSS Buton Hover Line


Di postingan kali ini, saya akan memberikan Script CSS Buton with hover Line, script ini dibuat oleh Luke Meyrick saya disini hanya membagikan ulang ke kalian, terutama yang suka design atau yang buat template,

jadi langsung saja ke intinya.
Berikut CSSnya

a {
  position: fixed;
  cursor: pointer;
  top: 50vh;
  left: 50%;
  color: white;
  transform: translate3d(-50%, -50%, 0);
  padding: 0.7em calc(0.7em * 1.2);
  display: inline-block;
  border: 5px solid transparent;
  position: relative;
  font-size: 1.5em;
  letter-spacing: 0.07em;
}
a .text {
  font-family: proxima-nova;
  transform: translate3d(0, 0.7em, 0);
  display: block;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1) 0.4s;
}
a:after {
  position: absolute;
  content: '';
  bottom: -5px;
  left: calc(0.7em * 1.2);
  right: calc(0.7em * 1.2);
  height: 5px;
  background: #4d90fe;
  z-index: -1;
  transition: transform 0.8s cubic-bezier(1, 0, 0.37, 1) 0.2s, right 0.2s cubic-bezier(0.04, 0.48, 0, 1) 0.6s, left 0.4s cubic-bezier(0.04, 0.48, 0, 1) 0.6s;
  transform-origin: left;
}

.line {
  position: absolute;
  background: #4d90fe;
}
.line.-right, .line.-left {
  width: 5px;
  bottom: -5px;
  top: -5px;
  transform: scale3d(1, 0, 1);
}
.line.-top, .line.-bottom {
  height: 5px;
  left: -5px;
  right: -5px;
  transform: scale3d(0, 1, 1);
}
.line.-right {
  right: -5px;
  transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.23s;
  transform-origin: top;
}
.line.-top {
  top: -5px;
  transition: transform 0.08s linear 0.43s;
  transform-origin: left;
}
.line.-left {
  left: -5px;
  transition: transform 0.08s linear 0.51s;
  transform-origin: bottom;
}
.line.-bottom {
  bottom: -5px;
  transition: transform 0.3s cubic-bezier(1, 0, 0.65, 1.01);
  transform-origin: right;
}

a:hover .text,
a:active .text {
  transform: translate3d(0, 0, 0);
  transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1) 0.4s;
}
a:hover:after,
a:active:after {
  transform: scale3d(0, 1, 1);
  right: -5px;
  left: -5px;
  transform-origin: right;
  transition: transform 0.2s cubic-bezier(1, 0, 0.65, 1.01) 0.17s, right 0.2s cubic-bezier(1, 0, 0.65, 1.01), left 0s 0.3s;
}
a:hover .line,
a:active .line {
  transform: scale3d(1, 1, 1);
}
a:hover .line.-right,
a:active .line.-right {
  transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.2s;
  transform-origin: bottom;
}
a:hover .line.-top,
a:active .line.-top {
  transition: transform 0.08s linear 0.4s;
  transform-origin: right;
}
a:hover .line.-left,
a:active .line.-left {
  transition: transform 0.08s linear 0.48s;
  transform-origin: top;
}
a:hover .line.-bottom,
a:active .line.-bottom {
  transition: transform 0.5s cubic-bezier(0, 0.53, 0.29, 1) 0.56s;
  transform-origin: left;
}

untuk kode manmpilkannya, gunakan HTML dibawah ini.

<a>
  <span class="text">ABDURRAHIM-ID</span>
  <span class="line -right"></span>
  <span class="line -top"></span>
  <span class="line -left"></span>
  <span class="line -bottom"></span>
</a>

Untuk demonya silahkan klik demo dibawah.

DEMO

Lorem ipsum is simply dummy text of the printing and typesetting industry.

Berikan komentar anda sesuai Topic yang ada.