button {
transition: all .5s ease-in-out;
}.brxe-button, .brxe-image {
position: relative;
overflow: hidden;
}
.brxe-image:after, .brxe-button:after{
display: block;
animation: 5s highlight infinite;
content: ' ';
position: absolute;
top: -50%;
right: -60%;
bottom: -50%;
left: -60%;
background: linear-gradient(50deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%);
-webkit-transform: translate(-80%, 0px);
-ms-transform: translate(-80%, 0px);
transform: translate(-80%, 0px);
}
@keyframes highlight{
0% {
-webkit-transform: translate(-80%, 0px);
-ms-transform: translate(-80%, 0px);
transform: translate(-80%, 0px);
}
50% {
-webkit-transform: translate(80%, 0px);
-ms-transform: translate(80%, 0px);
transform: translate(80%, 0px);
}
}