CODEWITHSUNDEEP
htmlcsscss-animations
YourPalNurav
YourPalNurav

Reputation: 1310

How to make a button which animates on hover like the button found on Airforce.com

How to make the button animate on hover just like the buttons found in this GIF or the ones found on airforce.com.

Button GIF

Upvotes: 3

Views: 151

Answers (2)

Temani Afif
Temani Afif

Reputation: 272985

Here is an idea with one element and multiple background:

.box {
  display:inline-block;
  padding:10px 20px;
  border-right:1px solid;
  border-left:1px solid;
  background:
      linear-gradient(#000,#000) top left,
      linear-gradient(#000,#000) top right,
      linear-gradient(#000,#000) bottom right,
      linear-gradient(#000,#000) bottom left;
  background-size:15% 1px,75% 1px;
  background-repeat:no-repeat;
  transition:.8s all;
}
.box:hover {
  background-size:75% 1px,15% 1px;
}
<div class="box">
  some text
</div>

<div class="box">
  more and more text
</div>

If you want the whitespace to be fixed you can adjust the background-size. Here is an example with 10px for the transparent part starting at 10px from the edge.

.box {
  display:inline-block;
  padding:10px 20px;
  border-right:1px solid;
  border-left:1px solid;
  background:
      linear-gradient(#000,#000) top left,
      linear-gradient(#000,#000) top right,
      linear-gradient(#000,#000) bottom right,
      linear-gradient(#000,#000) bottom left;
  background-size:10px 1px,calc(100% - 20px) 1px;
  background-repeat:no-repeat;
  transition:.8s all;
}
.box:hover {
  background-size:calc(100% - 20px) 1px,10px 1px;
}
<div class="box">
  some text
</div>

<div class="box">
  more and more text
</div>

Another idea with gradient also:

.box {
  display:inline-block;
  padding:10px 20px;
  border-right:1px solid;
  border-left:1px solid;
  background:
      linear-gradient(to right,
        #000 calc(50% - 5px),transparent calc(50% - 5px),
        transparent calc(50% + 5px),#000 calc(50% + 5px)),
      linear-gradient(to right,
        #000 calc(50% - 5px),transparent calc(50% - 5px),
        transparent calc(50% + 5px),#000 calc(50% + 5px));       
  background-size:150% 1px;
  background-position:top left,bottom right;
  background-repeat:no-repeat;
  transition:.8s all;
}
.box:hover {
  background-position:top right,bottom left;
}
<div class="box">
  some text
</div>

<div class="box">
  more and more text
</div>

Upvotes: 7

YourPalNurav
YourPalNurav

Reputation: 1310

Tried animating the borders but was very complicated so just made ::after and ::before to the button and then animated it.

body {
  display: flex;
  flex-direction: column;
  height: 93vh;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #eee;
  font-family: monospace;
}

.brk-btn {
  position: relative;
  background: none;
  color: aqua;
  text-transform: uppercase;
  text-decoration: none;
  border: 0.2em solid aqua;
  margin-top: 1em;
  padding: 0.5em 1em;
}

.brk-btn::before {
  content: "";
  display: block;
  position: absolute;
  width: 10%;
  background: #222;
  height: 0.3em;
  right: 20%;
  top: -0.21em;
  transform: skewX(-45deg);
  -webkit-transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}

.brk-btn::after {
  content: "";
  display: block;
  position: absolute;
  width: 10%;
  background: #222;
  height: 0.3em;
  left: 20%;
  bottom: -0.25em;
  transform: skewX(45deg);
  -webkit-transition: all 0.45 cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}

.brk-btn:hover::before {
  right: 80%;
}

.brk-btn:hover::after {
  left: 80%;
}

.underlined-a {
  text-decoration: none;
  color: aqua;
  padding-bottom: 0.15em;
  box-sizing: border-box;
  box-shadow: inset 0 -0.2em 0 aqua;
  transition: 0.2s;
}

.underlined-a:hover {
  color: #222;
  box-shadow: inset 0 -2em 0 aqua;
  transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}
<div>As inspired from the website of the <a href="https://www.airforce.com/" class="underlined-a">&nbsp;U.S. AirForce&nbsp;</a></div>
<br><br>
<a href="https://www.airforce.com/" class="brk-btn">
  Join Now
</a>

Upvotes: 6

Related Questions