<div class="container">
  <div>
    <button class="shrink-border">Ostentiferous</button>
    <button class="material-bubble">Xenization</button>
  </div>
 </div>

@import url(https://fonts.googleapis.com/css?family=Montserrat)

$offwhite: darken(white, 10%)
$darkblue: rgb(50,50,60)

*, *::after, *::before
  box-sizing: border-box

body
  background-color: $darkblue

.container
  display: flex
  flex-direction: column
  justify-content: center
  height: 100vh
  width: 100vw
  text-align: center

button
  font-family: 'Montserrat', sans-serif
  text-transform: uppercase
  
button
  position: relative
  border: none
  font-size: 18px
  transition: color 0.5s, transform 0.2s, background-color 0.2s
  outline: none
  border-radius: 3px
  margin: 0 10px
  padding: 23px 33px
  border: 3px solid transparent
  
  &:active
    transform: translateY(3px)
  
  &::after, &::before
    border-radius: 3px
  
.shrink-border
  background-color: transparent
  color: darken($darkblue, 10%)
  
  &:hover
    background-color: transparent
    box-shadow: none
    color: $offwhite
  
  &::before
    content: ""
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    border: 3px solid darken($darkblue, 10%)
    transition: opacity 0.3s, border 0.3s

  &:hover::before
    opacity: 0
  
  &::after
    content: ""
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: transparent
    border: 3px solid $offwhite
    opacity: 0
    z-index: -1
    transform: scaleX(1.1) scaleY(1.3)
    transition: transform 0.3s, opacity 0.3s
  
  &:hover::after
    opacity: 1
    transform: scaleX(1) scaleY(1)
 
.material-bubble
  background-color: transparent
  color: darken($darkblue, 10%)
  border: none
  overflow: hidden
  box-shadow: none
  
  &:hover
    color: $offwhite
  
  &::before
    content: ""
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    border: 3px solid darken($darkblue, 10%)
    transition: opacity 0.3s, border 0.3s

  &:hover::before
    opacity: 0
  
  &::after
    content: ""
    position: absolute
    top: 0
    left: 0
    width: 200px
    height: 200px
    background-color: lighten($darkblue, 10%)
    border-color: transparent
    border-radius: 50%
    transform: translate(-10px, -70px) scale(0.1)
    opacity: 0
    z-index: -1
    transition: transform 0.3s, opacity 0.3s, background-color 0.3s
  
  &:hover::after
    opacity: 1
    transform-origin: 100px 100px
    transform: scale(1) translate(-10px, -70px)