پیش‌نمایش زنده
کد HTML
<button class="button">
  glitch
</button>
کد CSS
.button {
  position: relative;
  border: 0;
  padding: 1em 2em;
  font-weight: 700;
  cursor: pointer;
  outline: .5em solid #fff;
  outline-offset: -.3em;
  color: #fff;
  background-color: #333;
  text-transform: uppercase;
}

.button:hover {
  animation: shake 500ms infinite,glitch 400ms infinite steps(4);
}

@keyframes shake {
  0% {
  }

  25% {
    transform: translate(-.1em,-.1em);
  }

  50% {
    transform: translate(.3em,0);
  }

  75% {
    transform: translate(0,.3em);
  }

  100% {
  }
}

@keyframes glitch {
  from {
    box-shadow: .8em .8em  rgba(240, 84, 219),
  -.8em -.8em rgba(84, 240, 232);
  }

  to {
    text-shadow: .3em .2em  rgba(240, 84, 219),
  -.3em -.2em rgba(84, 240, 232);
  }
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05