.btn-wrap {
  align-items: center;
 display: flex;
 gap: 3rem;
 height: 4.2rem;
}
.btn-text {
 overflow: hidden;
}
.btn-text-wrapper {
  display: flex;
  flex-direction: column;
height: 100%;
align-items: center;
align-content: center;
justify-content: center;

}
.btn-text-label {
  transform: translateY(50%);
  transition: transform .4s ease-out;
}
.btn-text-label-hover {
  transform: translateY(110%);
  transition: transform .4s ease-out;
}

.btn:hover {
 background-color:#9d9fa5;
 color:#fff
}
.btn:hover .btn-text-label {
 transform:translateY(-110%);
 transition:transform .4s ease-out
}
.btn:hover .btn-text-label-hover {
 transform:translateY(-50%);
 transition:transform .4s ease-out
}

.btn {
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
    background: #fff100;
    border-radius: 9999px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    height: 4.2rem;
    justify-content: center;
    padding: 2rem;
    position: relative;
    transition: background-color .4s ease-out,color .4s ease-out;
    font-family: 'Roboto-Medium';
}
.btn-yellow {
 background: #f1ecce;
}
.btn-black {
 background: #454547;
}

.btn-black .btn-text-label, .btn-black .btn-text-label a {
 color: #FFF;
}
.btn-yellow .btn-text-label {
 color: #454547;
}

.btn.bmail .btn-text-label a {
  color: #FFF!important;
}
.btn.bmail .btn-text-label-hover a {
  color: #454547!important;
}