Как решить задачу с кнопкой?

Question

[Sergey750il]

Доброго времени суток. Не могу понять как решить задачу, что бы при изменение состояния кнопки при hover, active она не смещала соседние блоки? Раньше решал такую задачу через :before, но сейчас разметка возможна только как в песочнице. Сложность это сохранить одинаковый размер текста во всех состояниях.

https://jsfiddle.net/zvhgjxum/1/

Comments

[Rustam Bainazarov]

Answer 1

[Aetae]

Абсолютно универсальный вариант: кнопке задаёшь position: absolute и кладёшь её в position:relative контейнер с фиксированными размерами.

Comments

[Sergey750il]

Попробовал https://jsfiddle.net/puew2rfq/ Теперь проблема как задать размер родительскому блоку? Кнопка не фикс размера... Как вариант через JS?

[Aetae]

Нет, через js - это уже наркомания.
Если кнопки могут быть абсолютно разными - используйте индивидуальный поход для каждого конкретного класса кнопок, как предложил 0xD34F.

Answer 2

[0xD34F]

.btn {
  margin: 5px;
}

.btn:hover {
  padding: 20px 30px;
  margin: 0px;
}

.btn:active {
  padding: 10px 20px;
  margin: 10px;
}

Answer 3

[Kizzeon]

Во первых менять padding при :hover и :active не стоит вообще. Тогда сама анимация становится дёрганной и ест больше ресурсов(по причине перерасчёта размера элемента).

Лучше при hover сделать transform: scale(); , который ничего никуда не сдвигает и более плавный.
Можно калькулятором высчитать сколько нужно там поставить что бы были необходимые пиксельные значения.
Если хочется разное увеличение то можно использовать scaleX и scaleY

Comments

[Kizzeon]

Также если хочется регулировать то, в какую сторону увеличится кнопка стоит добавить transform-origin элементу с нужными значениями

[Kizzeon]

В данном случае стоит поставить
transform-origin: left top; основному блоку и для hover с active поставить нечто по типу:
transform: translate(-5px, -5px) scale(1.2);
Значения scale можно поставить самому какие хочется.

[Sergey750il]

Но как тогда сохранить размер текста как в базовом состоянии?

[Kizzeon]

Sergey750il, Вариант 1.
Как говорится здесь: https://stackoverflow.com/questions/15544645/css3-...
Стоит уменьшить с transform scale дочерний элемент по формуле 1/число_на_которое_увеличивается_родитель
Например использовать transform: scale(0.9) при scale(1.1) родителю

Вариант 2
Добавить дочерний элемент который будет равен 100% размера родителя(кнопки) и приписать ему бэкграунд и transform scale при наводке и клику. Рядом от него будет как раз span с текстом который просто нужно отцентрировать