Создаём красивую кнопку загрузки с анимацией на CSS

Эффектная кнопка загрузки сделает ваш интерфейс более современным и приятным для пользователя. Вот простой способ её реализации:
HTML:

<button class="loading-button">
  <span class="loading-text">Загрузка...</span>
  <span class="spinner"></span>
</button>

.loading-button {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
}
.spinner {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 15px;
  height: 15px;
  border: 2px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translateY(-50%);
}
@keyframes spin {
  0% { transform: rotate(0deg) translateY(-50%); }
  100% { transform: rotate(360deg) translateY(-50%); }
}

Теперь у вашей кнопки есть анимация загрузки, которая мгновенно привлекает внимание.

#какэтосделать