<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>