<div class="container">
  
    <div class="btn btn1">
        <a class="text" href="#">Button</a>
    </div>
  
  <div class="btn btn2">
        <a class="text2" href="#">Button</a>
    </div>
  
  <div class="btn btn3">
        <a class="text3" href="#">Button</a>
    </div>
  
  <div class="btn btn4">
        <a class="text4" href="#">Button</a>
    </div>
  
   <div class="btn btn5">
        <a class="text5" href="#">Button</a>
    </div>
  
  <div class="btn btn6">
        <a class="text6" href="#">Button</a>
    </div>
  
  <div class="btn btn7">
        <a class="text7" href="#">Button</a>
    </div>
  
  <div class="btn btn8">
        <a class="text8" href="#">Button</a>
    </div>
  
  <div class="btn btn9">
        <a class="text9" href="#">Button</a>
    </div>
  
  <div class="btn btn10">
        <a class="text10" href="#">Button</a>
    </div>
  
  <div class="btn btn11">
        <a class="text11" href="#">Button</a>
    </div>
  
</div>

*,*:before,*:after {
  padding: 0;
  margin: 0;
  box-sizing:border-box;
}

.container {
  min-height: 100vh;
  position: relative;
  background-image: linear-gradient(to right, #ee28ee, #d23cf5, #b449f9,#9352fc, #6c59fc, #4871ff, #2183ff, #0093ff, #00b2ff, #00cdff, #00e5fd, #5ffbf1); 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  height: 55px;
  width: 140px;
  text-align: center;
  position: relative;
  margin: 50px;
}

a{
  text-transform: uppercase;
  text-decoration: none;
  color:#fff;
  font-size: 20px;
  letter-spacing: 3px;
  text-shadow: 2px 2px 4px #000;
}

/* ===== Button 1 ===== */

.btn1{
  width: 100px;
}

.btn1::before,
.btn1::after{
  content:"";
  width: 0%;
  height: 2px;
  position: absolute;
  background: #000;
  transition: width 300ms ease-in;
}

.btn1::before{
  bottom: 5px;
  left:0px;
}

.btn1::after{
  bottom: 10px;
  right:0px;
}

.btn1:hover:before,
.btn1:hover:after{
  width: 100%;
}

/* ===== Button 2 ===== */

.btn2{
  width: 120px;
}

.btn2::before,
.btn2::after{
  content:"";
  width: 0%;
  height: 2px;
  position: absolute;
  left:0px;
  background: #000;
}

.btn2::before{
  bottom: 5px;
  height: 4px;
  transition: width 300ms 150ms ease-in;
}

.btn2::after{
  bottom: 12px;
  transition: width 300ms ease-in;
}

.btn2:hover:before,
.btn2:hover:after{
  width: 100%;
}

/* ===== Button 3 ===== */

.btn3{
  width: 120px;
}

.btn3::before{
  content:"";
  width: 0%;
  height: 2px;
  position: absolute;
  background: #000;
  bottom: 5px;
  transition: width 300ms ease-in;
}

.btn3:hover:before{
   width:100%;
}

/* ===== Button 4 ===== */

.btn4{
  width: 120px;
}

.btn4::before{
  content:"";
  width: 100%;
  height: 2px;
  position: absolute;
  background: #000;
  bottom: 5px;
  transform:scaleX(0);
  transform-origin: left;
}

.btn4:hover:before{
   animation: move4 ease-in-out 1s infinite;
}

@keyframes move4 {
  0%{
    transform:scaleX(0);
  }
  50%{
    transform:scaleX(1);
    transform-origin: left;
  }
  50.1%{
    transform-origin: right;
      transform:scaleX(1);
  }
  100%{
    transform:scaleX(0);
    transform-origin: right
  }
}

/* ===== Button 5 ===== */

.btn5{
  width: 120px;
}

.text5{
  position: relative;
  z-index: 10;
  color:#fff;
}

.btn5::before{
  content:"";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #000;
  opacity: 0.8;
  transform-origin: bottom;
  transform:scaleY(0.05);
  border-radius: 2px;
}

.btn5:hover:before{
   animation: move5 ease-in-out 1.2s infinite;
}

@keyframes move5 {
  0%{
    transform:scaleY(0.05);
  }
  50%{
    transform:scaleY(1);
    transform-origin: bottom;
  }
  50.1%{
    transform-origin: top;
      transform:scaleY(1);
  }
  90%, 100%{
    transform:scaleY(0.02);
    transform-origin: top;
  }
}

/* ===== Button 6 ===== */

.btn6{
  width: 120px;
}

.text6{
  position: relative;
  z-index: 10;
  color:#fff;
}

.btn6::before{
  content:"";
  width: 100%;
  height: 16px;
  position: absolute;
  background: #000;
  opacity: 0.8;
  transform-origin: bottom;
  transform:scaleY(0.1);
  border-radius: 2px;
  bottom:0px;
}

.btn6:hover:before{
   animation: move6 ease 500ms forwards;
}

@keyframes move6 {
  0%{
    transform:scaleY(0.1);
  }
  50%{
    transform:scaleY(1);
    transform-origin: bottom;
  }
  50.1%{
    transform-origin: top;
      transform:scaleY(1);
  }
  90%, 100%{
    transform:scaleY(0.1);
    transform-origin: top;
  }
}

/* ===== Button 7 ===== */

.btn7{
  width: 100px;
}

.btn7::before,
.btn7::after{
  content:"";
  height: 2px;
  position: absolute;
  background: #000;
  transition: width 300ms ease-in;
}

.btn7::before{
  bottom: 5px;
  right:0px;
  width: 100%;
}

.btn7::after{
  bottom: 10px;
  left:0px;
  width:0%;
}

.btn7:hover:before{
  width:0%;
}
.btn7:hover:after{
  width: 100%;
}

/* ===== Button 8 ===== */

.btn8{
  width: 140px;
}

.text8{
    transition: transform 200ms ease;
}

.btn8::before{
  content:"";
  height: 10px;
  width: 0%;
  left:0px;
  top:calc(50% - 4px);
  position: absolute;
  background: #000;
  transition: width 300ms ease-in;
}

.btn8:hover .text8{
  transform:scale(1.1);
}

.btn8:hover:before{
  width:100%;
}

/* ===== Button 9 ===== */

.btn9{
  width: 120px;
}

.text9{
  transition: transform 200ms ease;
}

.btn9::after{
  content:"";
  z-index:2;
  height: 3px;
  width: 0%;
  left:0px;
  position: absolute;
  background: rgba(0,0,0,0.5);
  transition: width 300ms ease-in;
}

.btn9:hover .text9{
  transform:scale(1.1);
}

.btn9:hover:after{
  width:100%;
}

/* ===== Button 10 ===== */

.btn10{
  width: 120px;
}

.text10{
  transition: transform 200ms ease-in;
}

.btn10::after{
  content:"";
  height: 3px;
  border-radius: 3px;
  width: 100%;
  left:0px;
  bottom:10px;
  position: absolute;
  background: rgba(0,0,0,0.3);
  transition: height 200ms ease-in, background-color 100ms linear;
}

.btn10:hover:after{
  background-color: #000;
  height: 8px;
}

.btn10:hover .text10{
  transform:translateY(-10px);
}

/* ===== Button 11 ===== */

.btn11{
  width: 100px;
}

.text11{
  transition: transform 200ms ease-in;
}

.btn11::after{
  content:"";
  height: 10px;
  border-radius: 3px;
  width: 100%;
  left:0px;
  bottom:5px;
  position: absolute;
  background: #000;
  transition: height 200ms ease-in, background-color 100ms linear;
}

.btn11:hover:after{
  background-color: #000;
  height: 2px;
}

.btn11:hover .text11{
  transform:translateY(10px);
}