As the displacement of the block to keep the shade in place?

Hi, I'm new to coding, and faced with this problem, I have a button clicking which needs to be moved 1px down, its shadow should stay in place. I implemented the offset, but the shadow no matter what settings I told her : "active", not registered, goes along with the button that I should use in this situation ?
March 19th 20 at 08:30
3 answers
March 19th 20 at 08:32
Solution
It is logical that the movement of the object at a certain distance provokes his own shadow to move the same distance, under the condition of constancy of the light source (this was the entry)

And the solution lies in a negative shadow move against the vector motion of the object.
Example:

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

.button:hover {
transform: translate(1px);
box-shadow: 0 4px 15px #000;
}
March 19th 20 at 08:34
Yes, as a rule increase or decrease the size of the shadow, thereby creating the effect of above-below
March 19th 20 at 08:36
Hi. Throw css shadows please
box-shadow: 2px 2px 1px black; - Elvis_Witti commented on March 19th 20 at 08:39
@Elvis_Witti, I understand that the desired effect is 'indentation'?

https://codepen.io/anon/pen/ZPPoQg - Emilie commented on March 19th 20 at 08:42
@Emilie, No,that's not really the answer below, closer to the truth - Elvis_Witti commented on March 19th 20 at 08:45

Find more questions by tags CSS