Как применить transform к тексту внутри кнопки?

Question

Есть такая кнопка для входа на сайт:

.auth-button {
  display: inline-block;
  height: 35px;
  width: 100px;
  background-color: #5b88bd;
  border: 3px;
  border-radius: 3px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  margin: 14px 0;
  outline: none;
}

.auth-button:active {
  background-color: #4a76a8;
}

.auth-button-span:active {
  transform: translate(10px, 10px);
}

<button class="auth-button"><span class="auth-button-span">Войти</span></button>

Как можно сделать transform по вертикали на 5px для текста Войти? Я так думаю тут дело связано с position. И возможно ли это сделать без span внутри button?

Answer 1

Как можно сделать transform по вертикали на 5px для текста Войти? И возможно ли это сделать без span внутри button?

Только средствами CSS невозможно. По крайней мере, мне такое свойство неизвестно, чтобы можно было увеличить только высоту текста, не увеличивая его размер. Но можно поступить хитро, без использования span внутри button, использовать псевдоэлемент :before. Вот пример:

.auth-button {
  vertical-align: top;
  display: inline-block;
  position: relative;
  height: 35px;
  width: 100px;
  background-color: #5b88bd;
  border: 3px;
  border-radius: 3px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  margin: 14px 0;
  outline: none;
}

.auth-button:before {
  content: "Войти";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 2.4;
}

.auth-button:active {
  background-color: #4a76a8;
}

.auth-button:active:before {
  transform: scale(1, 1.4);
}

<button class="auth-button"></button>

Answer 2

Span выбран наверное не очень удачно, ибо это изначально инлайновый элемент. Чтобы сработало - пропишите ему display: block;
Псевдокласс :active относится скорее к самой кнопке, поэтому я попробовал бы так:

    .auth-button {
        display: inline-block;
        height: 35px;
        width: 100px;
        background-color: #5b88bd;
        border: 3px;
        border-radius: 3px;
        color: #fff;
        font-size: 15px;
        cursor: pointer;
        margin: 14px 0;
        outline: none;
    }
    
    .auth-button:active {
        background-color: #4a76a8;
    }
    
    .auth-button:active span {
        display: block;
        transform: translate(0, 5px);
     }

    <button class="auth-button"><span class="auth-button-span">Войти</span></button>

Спозициорировать сдвиг сможете более красиво. А если собирались не сдвигать, а растягивать, то нужно использовать scale вместо translate.

Answer 3

Думаю, что дополнительный тег <span> нужен лишь для разделения классов и более тонкой и гибкой настройки стилей. Ведь "голубая кнопка" и "белые буквы" звучит проще и логичнее, чем "голубая кнопка с белым текстом". Особенно такое критично, если подразумевается поддержка, например, "ночных" или кастомных тем оформления. Т.ч. можно обойтись и без <span>, если не требуется вышеизложенное.

Не совсем понял, для чего transform: translate()?.. Я вижу решение так (вторая кнопка без <span>, но эффект тот же):

.auth-button {
  display: inline-block;
  height: 35px;
  width: 100px;
  background-color: #5b88bd;
  border: 3px;
  border-radius: 3px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  margin: 14px 0;
  outline: none;
}

.auth-button:active {
  background-color: #4a76a8;
  /* Сдвиг вверх */
  padding: 0 0 5px;
  /* Сдвиг вниз
  padding: 5px 0 0; */
}

<button class="auth-button"><span class="auth-button-span">Войти</span></button>
<br>
<button class="auth-button">Войти</button>

БЛОГ НА HUSL

Как применить transform к тексту внутри кнопки?

Ответы (3 шт):