[data-elem-type="button"] .tn-atom {
  position: relative !important;
  background: #000 !important;
  color: #fff !important;
  border-radius: 0 !important;
  overflow: visible !important;
  transition: all 400ms cubic-bezier(.4,0,.2,1); /* плавный переход */
}

/* underline */
[data-elem-type="button"] .tn-atom::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, #eb2e28, #f5b02b, #efeee9, #f2c3db, #324b96);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 2;
}

[data-elem-type="button"]:hover .tn-atom {
  -webkit-transform: scale(1.1);
     -ms-transform: scale(1.1);
         transform: scale(1.1);
}

[data-elem-type="button"]:hover .tn-atom::after {
  transform: scaleX(1);
}


/* WOW-анимированный фирменный градиент для текста (например: ) */

.gradient .tn-atom {
animation: gradient 15s ease infinite;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -moz-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -webkit-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -o-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -ms-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}