<header class="pen-header">
   <h1>Hover Effects</h1>
</header>
<div class="buttons-wrapper">
  <!-- first button - filled -->
  <button class="round-btn round-btn--outlined">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/>
    </svg> 
  </button>
  <!-- second button - outlined -->
  <button class="round-btn round-btn--filled">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
    </svg>
  </button>
</div>

<footer class="pen-footer">
  <p>Crocoder</p>
</footer>

$size__round-btn: 60px;
$color__icon: #D63230;
$color__light-dark: #ebebeb;
$time: 0.3s;

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
html, body{ width: 100%; height: 100%; }

body{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pen-header{
  margin-top: 50px;
}

h1{
  position: relative;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
   &::before{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -9px;
    z-index: -1;
    color: $color__light-dark;
    content: "Btn";
    font-size: 3em;
    font-weight: 700;
  }
}

button{
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.buttons-wrapper{
  text-align: center;
}

.round-btn{
  position: relative;
  width: $size__round-btn;
  height: $size__round-btn;
  border-radius: $size__round-btn/2;
  margin: 0 15px;
  
  &:before{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    content: "";
    transform: scale3d(0.9, 0.9, 1);
    transition: box-shadow $time, transform $time; 
  }
  
  &--outlined{
    &:before{ box-shadow: inset 0 0 0 2px $color__icon; }
    & > svg{ fill: $color__icon; }
  }
  
  &--filled{
    &:before{ box-shadow: inset 0 0 0 35px $color__icon; }
    & > svg{ fill: #fff; }
  }
  
  & > svg{
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    transition: fill $time;
  }
}


// Hover effect
.round-btn--outlined:hover{
  &:before{
    box-shadow: inset 0 0 0 35px $color__icon;
    transform: scale3d(1, 1, 1); 
  }
  & > svg{ fill: #fff; }
}

.round-btn--filled:hover{
  &:before{
    box-shadow: inset 0 0 0 2px $color__icon; 
    transform: scale3d(1, 1, 1);
  }
  & > svg{ fill: $color__icon; }
}

.pen-footer{
  text-align: center;
}