/* .custom-button */
.custom-button {
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  padding: 15px 50px;
  margin-top: 20px;
  border: 0;
  border-radius: 4px;
  font-size: var(--smallestFontMax);
  transition: .4s ease;
}

/*.custom-button span */
.custom-button span {
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
/*.custom-button:after,*/
.custom-button:before {
  content: "";
  position: absolute;
  top: 0.67em;
  left: 0;
  width: 100%;
  text-align: center;
  font-weight: 400;
  opacity: 0;
  color: var(--white);
  -webkit-transition: 0.4s, opacity 0.6s;
  -moz-transition: 0.4s, opacity 0.6s;
  -o-transition: 0.4s, opacity 0.6s;
  transition: 0.4s, opacity 0.6s;
}

/* :before */
.custom-button:before {
/*  content: attr(data-hover);*/
  content: 'Click Here';
  -webkit-transform: translate(-150%, 0);
  -moz-transform: translate(-150%, 0);
  -ms-transform: translate(-150%, 0);
  -o-transform: translate(-150%, 0);
  transform: translate(-150%, 0);
}

/* :after */
/*.custom-button:after {
  content: attr(data-active);
  -webkit-transform: translate(150%, 0);
  -moz-transform: translate(150%, 0);
  -ms-transform: translate(150%, 0);
  -o-transform: translate(150%, 0);
  transform: translate(150%, 0);
}*/

/* Span on :hover and :active */
/*.custom-button:active span,*/
.custom-button:hover span {
  opacity: 0;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -o-transform: scale(0.3);
  transform: scale(0.3);
}

/*  
    We show :before pseudo-element on :hover 
    and :after pseudo-element on :active 
*/
/*.custom-button:active:after,*/
.custom-button:hover:before {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

/* 
  We hide :before pseudo-element on :active
*/
/*.custom-button:active:before {
  -webkit-transform: translate(-150%, 0);
  -moz-transform: translate(-150%, 0);
  -ms-transform: translate(-150%, 0);
  -o-transform: translate(-150%, 0);
  transform: translate(-150%, 0);
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}*/