.button-container {
    border-sizing: border-box;
    display: flex;
    flex-direction: row;
   align-items: center;
    width: fit-content;
    position: relative;
      background: #FFC805;
      transition: border-color 0.2s ease-in-out, transform 0.3s ease;
  }
  
  .text-container {
    background: #FFC805;
    justify-content: center;
    align-items: center;
    display: flex;
    width: fit-content;
   
      transition: background-color 0.2s ease-in-out, transform 0.3s ease, border-color 0.3s ease-in-out;
  }
  
  .button-text {
   color: black;
      font-family: roboto;
      padding: .75rem 1.25rem;
      margin: 0px;
      font-size: 24px;
      transition: color 0.2s ease-in-out, transform 0.3s ease;
  }
  
  .button-icon-container {
    width: 50px;
    height: 53px;
    background: #FFC805;
      border-left: 3px solid black; 
    display: flex;
  
    justify-content: center;
    align-items: center; 
    transition: height 0.2s ease-in-out;
  }
  
  .button-link {
  position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: auto;
      width: auto;
  }
  
  .button-icon {
    fill: black;
      transition: fill 0.2s ease-in-out, transform 0.2s ease;
    
  }
  /* hover elements*/
  
  
  .button-container:hover {
       
    .button-icon-container {
      background:  #FFC805;
      border-color: black;
       height: 28px; 
       align-self: center; 
      
    }
    .button-text {
      color: black;
    }
    .text-container {
    background: #FFC805;
     
      
    }
    .button-icon {
      fill: black;
    }
  
  }
  
   .button-container:hover {
      border-color: black; 
    }