<div class="container">
  <button>hover</button>
  <button>hover</button>
  <button>hover</button>
  <button>hover</button>
  <button>hover</button>
  <button>hover</button>
</div>

$grey: #111111
$white: #fff
$deep: #000223
$blue: #01185B
$mint: #42D6CA
$black: #000

body
  background-color: $grey
.container
  position: absolute
  width: 370px
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  hr
    visibility: hidden
  button
    width: 100px
    height: 30px
    box-sizing: border-box
    background: none
    border: none
    margin: 10px
  button:focus
    outline: none
    opacity: .2
    
  button:nth-child(1)
    background-color: $mint
    border: 5px solid $mint
    transition: all .5s ease
    &:before
      content: ' '
      border: 2px transparent solid
      position: absolute
      left: 5px
      top: 5px
      box-sizing: border-box
      width: 110px
      height: 40px
      transition: all .7s ease
  button:nth-child(1):hover
    background-color: rgba($mint, .7)
    color: $white
    border-radius: 20px
    &:before
      border-radius: 20px
      border: 2px $mint solid
  
  button:nth-child(2)
    border: 2px solid $mint
    color: $mint
    transition: all .5s ease
    &:before
      content: ' '
      border: 2px transparent solid
      position: absolute
      left: 50%
      top: 0px
      transform: translateX(-50%)
      box-sizing: border-box
      width: 120px
      height: 50px
      transition: all .7s ease
  button:nth-child(2):hover
    background-color: transparent
    border-radius: 20px
    &:before
      border-radius: 30px
      border: 1px $mint solid
  
  button:nth-child(3)
    color: $mint
    &:before
      content: ' '
      border: 2px transparent solid
      position: absolute
      right: -60px
      top: 0px
      transform: translateX(-50%)
      box-sizing: border-box
      width: 120px
      height: 50px
      transition: all .7s ease
      border: 5px rgba($mint, 0) solid
  button:nth-child(3):hover
    background-color: transparent
    border-radius: 20px
    &:before
      border-radius: 30px
      border: 1px $mint solid
      width: 100px
      height: 30px
      right: -40px
      top: 10px
  
  button:nth-child(4)
    color: $mint
    &:before
      content: ' '
      position: absolute
      left: 30px
      top: 65px
      box-sizing: border-box
      width: 20px
      height: 20px
      border-radius: 50%
      z-index: -1
    &:after
      content: ' '
      position: absolute
      left: 25px
      top: 60px
      box-sizing: border-box
      width: 30px
      height: 30px
      border-radius: 50%
      z-index: -1
  button:nth-child(4):hover
    &:before
      background-color: $mint
      animation: grow 1s infinite
    &:after
      border: 1px solid $mint
      animation: grow 1s infinite
  
  button:nth-child(5)
    background-color: rgba($mint, .1)
    border-radius: 50px
    color: $mint
  button:nth-child(5):hover
    background-color: rgba($mint, .2)
    &:before
      content: ' '
      border-radius: 20px
      border: 2px $mint solid
      position: absolute
      left: 135px
      top: 56px
      box-sizing: border-box
      width: 95px
      height: 40px
      transition: all .7s ease
      animation: grow 1s infinite
  
button:nth-child(6)
  background-color: rgba($mint, .05)
  border-radius: 50px
  color: $mint
button:nth-child(6):hover
  background-color: rgba($mint, .1)
  &:before
    content: ' '
    border-radius: 20px
    border: 2px $mint solid
    position: absolute
    right: 42px
    top: 55px
    box-sizing: border-box
    width: 40px
    height: 40px
    transition: all .7s ease
    animation: grow 1s infinite 
  
@keyframes grow
  from
    transform: scale(0,0)
    opacity: 1
  to
    transform: scale(1.5,1.5)
    opacity: 0