a(class='btn' href='' title='') Button
span(class='color color--blue' data-value='1')
span(class='color color--orange' data-value='1')
span(class='color color--green' data-value='1')
span(class='color color--white' data-value='1')

*{
  margin:0;
  padding:0;
}
body
{
  overflow:hidden;
  background:rgb(20,20,20);
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
.btn
{
  font-family:sans-serif;
  color:white;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2.8px;
  background-color: #1b8bf9;
  padding:15px 50px;
  border-radius:5rem;
  box-shadow: 1px 2.9px 16px                 rgba(27,139,249,0.4);
  transition:0.6s cubic-bezier(0.01, 1.69,    0.99, 0.94); 

  &:hover
  {box-shadow: 3px 4.9px 16px rgba(27,139,249,0.6);
   letter-spacing:5px;
}
  &--clicked
  {
    transition:0.6s cubic-bezier(0.01, 1.69, 0.99, 0.94); 
    padding:15px 2px;
    width:50px;
    color:transparent;
z-index:-10;
  }
}

.color{
  display:block;
   width:0;
  height:0;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  position:absolute;
  transition:0.8s ease;
   border-radius:50%;
  background-color:transparent;
}
.expanded
{
   width:200%;
  padding-bottom:200%;
  height:auto; 

}
$colors: (
  blue: #1b8bf9,
  orange: #FF6C19,
  green: #41FF9F,
  white: #f9f9f9
);
$i:0.25s;
@each $colorName, $color in $colors {
  
  .color--#{$colorName} {
    background-color: $color;
    transition-delay:($i);
    
  }
  $i: $i + 0.25s;
}

const button = document.querySelector('.btn');
  button.addEventListener('click',(e)=>{
    e.preventDefault();
    button.classList.add('btn--clicked');
    document.querySelectorAll('span').forEach((element)=>{element.classList.add('expanded')})
    
    
    
    
    /* 
---------------------------------------
just to reset without having to refresh..
 --------------------------------*/
     setTimeout(()=>{button.classList.remove("btn--clicked")},3500);
     setTimeout(()=>{document.querySelectorAll('span').forEach((element)=>{element.classList.remove('expanded')})},1700)});