How to achieve this "highlighting" effect with CSS?

Question

I came across an ecommerce website and I saw this "Buy" button:

For each 5 seconds approximately, the button "highlights" on diagonal, like the image shows.

How to get into that effect in CSS or, maybe, using jQuery (the easiest)?

Answer 1

you may use a linear-gradient that you animate:

.button {
  width: 200px;
  min-height: 50px;
  font-size: 20px;
  color: #fff;
  background-image: linear-gradient(120deg, #e70d91 0, #e70d91 50%, white 55%, #e70d91 60%);
  background-size: 220% 220%;
  background-position: 140% 0;
  background-repeat:no-repeat;
  background-color:#e70d91;
  animation:animate 5s infinite linear; 
}

@keyframes animate {
  0% {
     background-position: 140% 0;
  }
  20% {
     background-position: 0% 0; 
  }
  20.1% {
    background-position: 140% 0;
  }
  100% {
    background-position: 140% 0;
  }
}

<div class="button">
  Some text here
</div>