Как добиться этого эффекта выделения с помощью CSS?

Question

Я наткнулся на сайт электронной коммерции и увидел кнопку «Купить»:

Примерно каждые 5 секунд кнопка «подсвечивается»по диагонали, как показано на рисунке.

Как получить этот эффект в CSS или, может быть, используя jQuery (самый простой)?

Answer 1

вы можете использовать linear-gradient, который вы оживляете:

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