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

Question

[Breeze1]

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

Answer 1

[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/

Comments

[Breeze1]

супер, спасибо