/*button */
.special-button-link {
    text-decoration: none;
}

.special-button {
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    color: #0a2c19;
    transition: background-color 0.5s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    background-color: rgba(252, 250, 250, 0.624);
    border: 1px solid #76C1B5;
    border-radius: 5px;
  }

 #special-button-2 {
  border: none;

  }
  
  .special-button span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: #76C1B5;
    transform: translateY(150%);
    border-radius: 50%;
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    transition-delay: calc((var(--n) - 1) * 0.1s);
    z-index: -1;
   
  }
  
  .special-button:hover {
    color: white;
    border: 1px solid white;
 
  }

 


  
  .special-button:hover span {
    transform: translateY(0) scale(2);
  }
  
  .special-button span:nth-child(1) {
    --n: 1;
  }
  
  .special-button span:nth-child(2) {
    --n: 2;
  }
  
  .special-button span:nth-child(3) {
    --n: 3;
  }
  
  .special-button span:nth-child(4) {
    --n: 4;
  }