.main-contain
h1 Button Animation
  .div
    .flex-1
      button.button.btn-1 button
    .flex-1
      button.button.btn-2 button
    .flex-1
      button.button.btn-3 button
    .flex-1
      button.button.btn-4 button
    .flex-1
      button.button.button-mat.btn--5
        .psuedo-text button
    .flex-1
      button.button.button-mat.btn--6
        .psuedo-text button
    .flex-1
      button.button.button-mat.btn--7
        .psuedo-text button
    .flex-1
      button.button.button-mat.btn--8
        span.psuedo-text button

// Colors //
$color: #5533ff
$color2: #38e2ee
$deeper: darken($color, 5%)
$lighter: lighten($color2, 10%)

// Shadows //
@mixin box_shadow ($level)
  @if $level == 0
    box-shadow: none

  @else if $level == 1
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)

  @else if $level == 2
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)

  @else if $level == 3
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)

  @else if $level == 4
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)

  @else if $level == 5
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)


*
  font-size: 10px
  font-family: 'Ubuntu', sans-serif

body
  background: linear-gradient(to bottom right, $color, $color2)
  background-size: cover
  background-repeat: no-repeat
  min-height: 100vh
  position: relative
  
.main-contain
  display: flex
  flex-direction: column
  justify-content: center
  max-width: 180rem
  margin: auto
h1
  font-size: 6rem
  padding: 1rem
  text-align: center
  color: white
  font-weight: 500
  margin: 5rem 0 0 0 
  
button
  border: none
  text-decoration: none
  color: rgba(white, .95)
  cursor: pointer

.div
  padding-top: 50px
  display: flex
  flex-wrap: wrap
  justify-content: space-around
  text-align: center
  position: relative
  max-width: 1200px
  margin: auto
  
.psuedo-text
  color: $color
  position: relative
  top: 0
  height: 100%
  width: 100%
  display: inline
  height: auto
  font-size: 1.7rem
  font-size: 700
  transition: .25s ease-in
  transition-delay: .1s

.flex-1
  flex: 1
  min-width: 250px
  margin: 0 auto 50px
  
//Base Button Styles
  
.button
  padding: 2rem 7rem
  background: white
  text-align: center
  display: inline-block
  font-size: 1.7rem
  text-transform: uppercase
  font-weight: 700
  position: relative
  will-change: transform
  
.button-mat
  color: $color
  border: 0px transparent
  border-radius: .3rem
  transition: .3s ease-in-out
  transition-delay: .35s
  overflow: hidden
  
  &:before
    content: ''
    display: block
    background: $deeper
    position: absolute
    width: 200%
    height: 500%
    border-radius: 100%
    transition: .36s cubic-bezier(0.4, 0.0, 1, 1)
    
  &:hover .psuedo-text
    color: white

  &:hover
    color: transparent
  
// FIRST BUTTON

.btn-1
  letter-spacing: .05rem
  transition: .5s all ease-in-out
  position: relative
  background: transparent
    
  &:before
    border-top: .3rem solid white
    border-bottom: .3rem solid white
    display: block
    position: absolute
    background: transparent
    content: ''
    top: 0
    bottom: 0
    left: 100%
    right: 100%
    transition: .48s all ease-in-out
  
  &:hover
    letter-spacing: .4rem
    
  &:hover:before
    left: 25%
    right: 25%
  
// Second Button

.btn-2
  letter-spacing: .05rem
  position: relative
  background: white
  color: $deeper
  border-radius: .3rem
  position: relative
  transition: .2s all ease-in-out
    
  &:before
    display: block
    position: absolute
    background: transparent
    border: none
    border-radius: .3rem
    transform: translateY(5px) scale(.9)
    content: ''
    height: 5px
    z-index: -1
    bottom: -1%
    left: 0
    right: 0
    transition: .2s all ease-in-out
    @include box_shadow(4)
      
  &:hover:before
    transform: translateY(8px) scale(.8)
    opacity: .8
    @include box_shadow(5)
    
  &:hover
    transform: translateY(-5px)
  
  
  
// Third Button

.btn-3
  letter-spacing: .05rem
  position: relative
  background: white
  color: $deeper
  overflow: hidden
  transition: .3s ease-in-out
  border-radius: .3rem
  z-index: 1
  @include box_shadow(5)
    
  &:hover
    @include box_shadow(3)
    transform: scale(.95)

    
// Fourth Button
.btn-4
  background: rgba(black, .1)
  box-shadow: 0px 0px 0px 5px rgba(white ,0.95)
  border: 1px solid white
  transition: .3s all ease-in-out
  
  &:hover
    background: rgba(black, 0.2)
    box-shadow: 0px 0px 10px 5px rgba(255,255,255,0.85)
    
    
// Fifth Button
.btn--5
  @include box_shadow(2)

  &:before
    transform: translate(-120%,-50%) translateZ(0)

  &:hover:before
    transform: translate(-45%,-34%) translateZ(0)

  
// Sixth Button
.btn--6
  @include box_shadow(2)

  &:before
    transform: translate(40%,-50%) translateZ(0)

  &:hover:before
    transform: translate(-45%,-34%) translateZ(0)

  
// Seventh Button
.btn--7
  @include box_shadow(2)

  &:before
    transform: translate(-110%,-110%) translateZ(0)

  &:hover:before
    transform: translate(-45%,-34%) translateZ(0)

  
// Eighth Button
.btn--8
  @include box_shadow(2)
  
  &:before
    transform: translate(30%,10%) translateZ(0)
    
  &:hover:before
    transform: translate(-45%,-34%) translateZ(0)