.customBtn * {
    font-family: var(--e-global-typography-primary-font-family);
}

a.customBtn {
    background-color: var(--e-global-color-primary);
    display: inline-block;
    padding: 7px 43px;
    border-radius: 5px;
    transition: color .25s ease, transform .25s ease, box-shadow .25s ease;
    will-change: transform;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

span.customBtnText {
    color: var(--e-global-color-eddbf0c);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 2;
    letter-spacing: 4px;
}

a.customBtn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1A231D 0%, #82CC52 100%);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}

a.customBtn:hover::before,
a.customBtn:focus-visible::before{
  opacity: 1;
}

a.customBtn:hover span.customBtnText,
a.customBtn:focus-visible span.customBtnText{
  color: white; 
}