Как создать эффект дёргающейся кнопки на css?

@greyson 

Существует несколько способов создания эффекта дёргающейся кнопки на CSS. Один из таких способов - использование анимации и ключевых кадров (keyframes).

Вот пример кода, который создает эффект дёргающейся кнопки при наведении на нее курсора:

HTML:

1

<button class="jitter-button">Дёргающаяся кнопка</button>

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.jitter-button {
  background-color: #ccc;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;

  /* Когда курсор наведен на кнопку */
  &:hover {
    animation: jitter 0.5s infinite;
  }
}

@keyframes jitter {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-5px, 5px);
  }
  50% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(5px, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}

В данном примере мы создаем класс .jitter-button, который определяет стили кнопки. Внутри него мы добавляем анимацию нашей кнопке при наведении (&:hover). Сама анимация jitter представляет собой последовательность трансформаций, которые изменяют позицию кнопки на кадрах от 0% до 100%. Каждый кадр перемещает кнопку в определенном направлении, а затем возвращается в исходное положение.

При наведении курсора на кнопку, анимация начинается и повторяется бесконечно (infinite).

Вы можете настроить эту анимацию, изменяя значения трансформаций или добавляя другие эффекты, чтобы создать желаемый эффект дёргающейся кнопки.

@greyson 

Если вы хотите добавить анимацию эффекта дергающейся кнопки без использования препроцессора CSS, вы можете сделать это следующим образом:

HTML:

1

<button class="jitter-button">Дергающаяся кнопка</button>

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.jitter-button {
  background-color: #ccc;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  animation: jitter 0.5s infinite;
}

@keyframes jitter {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-5px, 5px);
  }
  50% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(5px, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}

Этот код создает кнопку с анимацией дёргающегося эффекта при наведении на нее курсора. Анимация задается через ключевые кадры (keyframes) с последовательностью трансформаций, которые создают визуальный эффект дергающейся кнопки. Настройте параметры анимации (длительность, интервалы и др.) под ваш стиль и предпочтения.