Sunday, 6 September 2020

CSS Buton Hover Line

CSS Buton Hover Line

CSS Buton Hover Line
Sunday, 6 September 2020

In this post, I will provide a Buton CSS Script with hover Line, this script was created by Luke Meyrick,  I am here to just share it with you, especially those who like to design or create templates,

so just get to the point.
Here's the CSS

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

for the display code, use the HTML below.

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

For the demo, please click on the demo below.

DEMO
CSS Buton Hover Line
4/ 5
Oleh

Comments