Анимированный блик для кнопки в Elementor WordPress

Показываю как просто сделать классный эффект блика для кнопки в конструкторе Elementor WordPress без каких-либо дополнений и плагинов.

CSS код блика для кнопки:

.elementor-button {
  position: relative;
  color: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
}
.Здесь поставьте css class от Вашей кнопки:before {
  content: '';
  width: 100%;
  height: 200%;
  position: absolute;
  top: 0; left: 0;
  opacity: 0.5;
  filter: blur;
  background: linear-gradient(to left, transparent 0%, #fff 40%, #fff 60%, transparent 100%);
  transform: translate(-100%, -25%) rotate(10deg);
  animation: blick 5s infinite;
}
@keyframes blick {
  0% {
    transform: translate(-100%, -25%) rotate(10deg);
  }
  20% {
    transform: translate(100%, -25%) rotate(10deg);
  }
  100% {
    transform: translate(100%, -25%) rotate(10deg);
  }
}

 

Адаптивная, SEO подготовленная WordPress тема
Артём/ автор статьи
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: