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

  • A+
Category:Languages

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

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

 


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>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: