Что получится

Прозрачная кнопка с радужной полосой по нижней границе. При наведении надпись увеличивается и окрашивается тем же градиентом. Ни картинок, ни JavaScript — только CSS.

HTML-код

<button type="button" class="noselect"></button>

CSS-код

.noselect {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  width: 250px;
  height: 30px;
  border: none;
  cursor: pointer;
  background: transparent;
  background-image: linear-gradient(70deg,#0ebeff,#ffdd40,#ae63e4,#47cf73);
  background-size: 100% 10%;
  background-position: bottom;
  background-repeat: no-repeat;
}

button:before {
  content: 'CREATE';
  color: #ccc;
  transition: 1s;
}

button:hover:before {
  transform: scale(2) translateX(33%);
  letter-spacing: 10px;
  background: -webkit-linear-gradient(70deg,#0ebeff,#ffdd40,#ae63e4,#47cf73);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Надпись задаётся через :before — так её можно масштабировать и заливать градиентом отдельно от самой кнопки.

Что важно знать

• scale и letter-spacing анимируются плавно, но меняют ширину текста — проверьте, чтобы надпись не вылезала за кнопку.
• Градиентный текст работает только в WebKit-браузерах; в остальных надпись просто станет цветной заливкой.
• Прозрачная кнопка на белом фоне почти не видна — нужна контрастная подложка-градиент снизу, она здесь и используется.
• Не забывайте про button:focus: отключённый контур ломает навигацию с клавиатуры.

Нужен сайт, а не только пример?

Сделаю кнопки и формы, которые ведут к заявке: состояния, отправка на почту и в CRM. С 2009 года, по договору, с поддержкой после запуска.

ОБСУДИТЬ ПРОЕКТ

Полезно по теме: CSS-анимация, обзор CSS, примеры HTML, про Django.