Анимация кнопок + 2 готовых кода
Авто-блик кнопки
  1. Создаем ZERO блок с кнопкой
  2. Назначаем CSS CLASS NAME для кнопки - t580__btn
  3. Создаем блок T123 для вставки html кода
  4. Вставляем код в блок
<script>
          
    $('.t580__btn').addClass('autoflash').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');
</script>

<style>

     .autoflash{
        position: relative;
        overflow: hidden;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

     .flash{
       content: "";
    background-color: rgba(255, 255, 255, 0.5);
    height: 100%;
    width: 3em;
    display: block;
    position: absolute;
    top: 0;
    left: -4.5em;
    -webkit-transform: skewX(-45deg) translateX(0);
    transform: skewX(-45deg) translateX(0);
    -webkit-transition: none;
    transition: none;
    }
    
    .lighting {
    webkit-animation: moving 3s ease-in-out infinite;
    -moz-animation: moving 3s ease-in-out infinite;
    -ms-animation: moving 3s ease-in-out infinite;
    -o-animation: moving 3s ease-in-out infinite;
    animation: moving 3s ease-in-out infinite;
   
    }
    
  @keyframes moving {  
     30% {  webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);   
        
        }
   
    100% {  webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);   
        
        }
     }
      
</style>
Авто-блик кнопки 2
  1. Создаем ZERO блок с кнопкой
  2. Назначаем CSS CLASS NAME для кнопки - t580__btn
  3. Создаем блок T123 для вставки html кода
  4. Вставляем код в блок
<script>
function button1() {
	 /* https://vakas.ru/tilda/effekty-animacii-dlia-knopok-v-tilde/ */
	$('.t-btn').addClass('autoink').append('<div class="ink animate" style="height: 200px;width: 350px;top: -20px;left: -140px;"></div>');
	$('.t-submit').addClass('autoink').append('<div class="ink animate" style="height: 200px;width: 350px;top: -20px;left: -140px;"></div>');
	$('.mybutton').addClass('autoink').append('<div class="ink animate" style="height: 200px;width: 350px;top: -20px;left: -140px;"></div>');
	$('div[data-elem-type="button"] .tn-atom').addClass('autoink').append('<div class="ink animate" style="height: 200px;width: 350px;top: -20px;left: -140px;"></div>');
}

setTimeout(button1, 1000);
setTimeout(button1, 3000);
</script>




<style>
     .autoink{
        position: relative;
        overflow: hidden;
    }
    .ink{
       display: block;
       position: absolute;
       background: rgba(255, 255, 255, 1.0);
       border-radius: 100%;
       -webkit-transform: scale(0);
       -moz-transform: scale(0);
       -o-transform: scale(0);
       transform: scale(0);
       z-index: 20;
    }

    .animate {
    webkit-animation: ripple 4s linear infinite;
    -moz-animation: ripple 4s linear infinite;
    -ms-animation: ripple 4s linear infinite;
    -o-animation: ripple 4s linear infinite;
    animation: ripple 4s linear infinite;
     }
   @keyframes ripple {
    20% {
        opacity: 0;
        transform: scale(2.5);
        }
    100% {
        opacity: 0;
        transform: scale(2.5);
        }
   }
</style>
Made on
Tilda