Анимация кнопки

<style>
/*Эффект для кнопки*/
.btnanim {
    background-image: linear-gradient(0deg , #ffcc00 45%, #ffff00) !important;
    box-shadow: 0 10px 20px 0 rgba(255, 141, 0, 0.35) !important;
    background-position: 100% 0 !important;
    background-size: 200% 200% !important;
    transition: all 0.4s ease-in-out !important;
}
/*Эффект для кнопки*/
.btnanim:hover {
   box-shadow: 0 0 0 0 rgba(0,40,120,0) !important;
   background-position: 0 0 !important;
}
.btnanim {
        overflow: hidden;
        border-radius: 200px;
    }
     .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>

<script>
          
    $('.btnanim').addClass('autoflash').append('<div class="flash lighting" style="height: 105px;width: 40px;top: 0px;left: -80px;"></div>');
</script>

Made on
Tilda