Кнопка с подсвечивающейся маской

Видеоинструкция, как вообще делать такие кнопки:

Демонстрация работы: https://taplink.cc/onthewaytothesun/p/7fe734/

Код красной кнопки

<div class="reg-btn">
  <a href="#" target="_blank"><div class="tn_atom">register now</div></a>
</div>
<style>
 @font-face {      

font-family: 'font';
src: url('https://cc26299.tmweb.ru/files/fonts/FontsFree-Net-SFProText-Regular.otf')  format('opentype'), url('https://cc26299.tmweb.ru/files/fonts/FontsFree-Net-SFProText-Regular.woff') format('woff'); 

} 
    @font-face {      

font-family: 'font-heavy';
src: url('https://cc26299.tmweb.ru/files/fonts/FontsFree-Net-SFProText-Heavy-1.otf')  format('opentype'), url('https://cc26299.tmweb.ru/files/fonts/FontsFree-Net-SFProText-Heavy-1.woff') format('woff'); 

} 
body{
background: black;
}
.reg-btn {
  pointer-events:none;
  overflow: hidden;
position: relative;
  max-width: 350px;
  border-radius: 10px;
}
.reg-btn a {
  pointer-events:all;
text-decoration: none;
  width:100%;
  cursor: pointer;
}
.reg-btn::before {
content:"register now";
  position: absolute;
   width: 100%;
  height: 100%;
  font-family: 'font-heavy';
font-style: italic;
font-weight: 300;
font-size: 16px;
line-height: 25px;
text-align: center;
color: #FFFFFF;
  text-transform: uppercase;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reg-btn .tn_atom {
font-family: 'font-heavy';
font-style: italic;
font-weight: 300;
font-size: 16px;
line-height: 25px;
text-align: center;
color: #FFFFFF;
  text-transform: uppercase;
  border-radius: 37px;
  padding: 19px 60px;
  position: relative;
  z-index: 1;
  background: linear-gradient(97.01deg, #FD493D 12.51%, #FF1515 91.32%);
  overflow: hidden;
    }
.reg-btn .tn_atom::before {
 border-radius: 37px;
content:"";
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
  width: 100%;
  height: 100%;
background: url(https://cc26299.tmweb.ru/files/Button.png);
  background-size: 100% 100%;
  transform: scale(1,-1);

}
.reg-btn .tn_atom::after {
border-radius: 37px;
content:"";
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  width: 45%;
  height: 100%;
background: linear-gradient(90.27deg, rgba(255, 198, 87, 0) 0.33%, #FFC95F 41.45%, #FFCB66 51.07%, rgba(255, 205, 107, 0) 84.31%);
  animation: shadow-blink 3s linear infinite normal; 

}
@keyframes shadow-blink {
  0% {transform: translate(-300px, 0px);}
 66% {transform: translate(400px, 0px);}
  100% {transform: translate(400px, 0px);}
}

</style>

Код черной:

<div class="sec-btn">
  <a href="#" target="_blank"><div class="tn_atom">register now</div></a>
</div>

<style>
.sec-btn {
  border: 1px solid white;
  box-sizing: border-box;
    display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
position: relative;
  max-width: 350px;
  border-radius: 30px;
  pointer-events: none;
}
.sec-btn a {
  pointer-events:all;
text-decoration: none;
  width:100%;
  cursor: pointer;
}
.sec-btn::before {
  box-sizing: border-box;
content:"register now";
  position: absolute;
   width: 100%;
  height: 100%;
  font-family: 'font-heavy';
font-style: italic;
font-weight: 300;
font-size: 16px;
line-height: 25px;
text-align: center;
color: #FFFFFF;
  text-transform: uppercase;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec-btn .tn_atom {
  box-sizing: border-box;
  min-height: 92px;
font-family: 'font-heavy';
font-style: italic;
font-weight: 300;
font-size: 16px;
line-height: 25px;
text-align: center;
color: transparent;
  text-transform: uppercase;
  border-radius: 30px;
  width: 100%;
  padding: 19px 60px;
  position: relative;
  z-index: 1;
  background: black;
  overflow: hidden;
    }
.sec-btn .tn_atom::before {
  box-sizing: border-box;
background-size: 104% auto;
    background-position: center center;
content:"";
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
  width: 100%;
  height: 100%;
background-image: url("data:image/svg+xml,%3Csvg width='383' height='101' viewBox='0 0 383 101' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 0C8.05887 0 0 8.0589 0 18V83C0 92.9411 8.05887 101 18 101H365C374.941 101 383 92.9411 383 83V18C383 8.0589 374.941 0 365 0H18ZM18 58.5842H150.578L160.987 32.2964L167.014 76.5078L176.327 58.5842H212.485L223.989 8L231.659 88.0585L243.164 58.5842H329.175C331.836 58.6586 334.841 58.733 337.951 58.8101C351.488 59.1453 367.013 59.5297 364.785 60.1774C363.181 60.644 334.51 60.5873 303.874 60.5266C282.209 60.4836 259.561 60.4388 244.807 60.5757L232.207 92.4398C231.477 93.2365 229.797 93.7941 228.92 89.6517L223.442 21.9406L215.772 60.5757C215.954 60.8413 215.772 61.3724 213.58 61.3724H177.97L168.109 80.4908C167.014 81.8185 164.713 83.2789 164.274 78.4993C163.836 73.7197 161.9 53.4063 160.987 43.8471L153.865 60.5757C154.048 60.8413 153.865 61.3724 151.674 61.3724C148.935 61.3724 33.3396 60.9741 18 58.5842Z' fill='black'/%3E%3C/svg%3E%0A");
}
.sec-btn .tn_atom::after {
border-radius: 18px;
content:"";
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  width: 45%;
  height: 100%;
background: linear-gradient(270deg, rgba(112, 212, 255, 0) 0%, #57CDFF 46.87%, rgba(106, 210, 255, 0) 100%);
  animation: shadow-blink 3s linear infinite normal; 

}
@keyframes shadow-blink {
  0% {transform: translate(-300px, 0px);}
 66% {transform: translate(400px, 0px);}
  100% {transform: translate(400px, 0px);}
}
</style>