Как при смещении блока оставить тень на месте?

Question

[Дмитрий]

Привет, я новичок в верстке, и столкнулся с такой проблемой, у меня есть кнопка при клике которая должна смещаться на 1px вниз, при этом ее тень должна остаться на месте. Смещение я реализовал, а вот тень какие бы параметры я ей в :active не прописывал, ездит вместе с кнопкой, что я должен использовать в этой ситуации ?

Answer 1

[ReActor Дмитрий Вершанский]

Логично, что движение объекта на определенное расстояние провоцирует его собственную тень сдвинуться на аналогичное расстояние, при условии постоянства источника света (это было вступление)

А решение кроется в отрицательном движении тени против вектора движения этого объекта.
Пример:

.button {
width: 100px;
height: 45px;
background: #bbb;
box-shadow: 5px 0 15px #000;
}

.button:hover {
transform: translate(1px);
box-shadow: 4px 0 15px #000;
}

Answer 2

[Юпитер Макс]

да как правило увеличивают или уменьшают размер тени, за счет этого создается эффект выше-ниже

Answer 3

[Mikhail Rerberg]

Привет. Скинь css-код тени пожалуйста

Comments

[Дмитрий]

box-shadow: 2px 2px 1px black;

[Mikhail Rerberg]

Дмитрий, Я правильно понимаю, что нужен эффект 'вдавливания'?

https://codepen.io/anon/pen/ZPPoQg

[Дмитрий]

Mikhail Rerberg, Нет,это немного не то, ответ ниже, ближе к истине