@Breeze1

Необычная кнопка?

По ховеру круглая кнопка плавно трансформируется в кнопку с текстом. Где-то встречал на просторах интеренета, но не могу найти сейчас. Возможно кто-нибудь кинет пример подобных кнопок?

5a34fa131039e739720878.png
  • Вопрос задан
  • 134 просмотра
Решения вопроса 1
0xD34F
@0xD34F
<button class="btn" data-hover-text="hello, world!!"></button>

.btn {
  border: 0;
  background: green;
  display: inline-block;
  width: 3em;
  height: 3em;
  border-radius: 1.5em;
  overflow: hidden;
  transition: width 0.2s linear;
}

.btn::before {
  display: inline-flex;
  width: 100%;
  height: 100%;
  color: white;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  transition: letter-spacing 0.2s linear;
  letter-spacing: -2px;
  content: ">";
}

.btn:hover {
  width: 10em;
}

.btn:hover::before {
  letter-spacing: 0px;
  content: attr(data-hover-text);
}

https://jsfiddle.net/gbzcsuo2/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы