How to solve the problem with the button?

Good time of day. I can not understand how to solve the problem, that would be when the state change button when hover is active it is not displaced adjacent blocks? Before solved this problem using :before, but now the markup is only possible in the sandbox. The difficulty is to keep the same text size in all States.

https://jsfiddle.net/zvhgjxum/1/
April 4th 20 at 00:53
3 answers
April 4th 20 at 00:55
Absolutely universal variant: button set position: absolute and put it in position:relative container with fixed sizes.
Tried https://jsfiddle.net/puew2rfq/ Now the problem is how to specify the size of the parent block? Button is not fixed size... As an option via JS? - Althea.Sanford commented on April 4th 20 at 00:58
No, in js - it is an addiction.
If the buttons can be absolutely different - use individual approach for each particular class of buttons, as suggested by @Alexane. - tyrel.Robel commented on April 4th 20 at 01:01
April 4th 20 at 00:57
.btn {
 margin: 5px;
}

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

.btn:active {
 padding: 10px 20px;
 margin: 10px;
}
April 4th 20 at 00:59
Firstly to change the padding in :hover and :active is not worth it at all. Then the animation becomes jerky and eats more resources(due to recalculation of the size of the item).

It is better to do when you hover transform: scale(); , which nothing moves and smoother.
Can calculator to calculate how much they need that would have been necessary pixel values.
If you want a different magnification you can use scaleX and scaleY
Also if you want to adjust it, which way will increase button is to add the transform-origin is the element with the desired values - kenneth.Kihn46 commented on April 4th 20 at 01:02
In this case, it is necessary to put
transform-origin: left top; main unit for hover and active to put something of type:
transform: translate(-5px, -5px) scale(1.2);
Value scale you can put yourself what you want. - kenneth.Kihn46 commented on April 4th 20 at 01:05
But then how to keep the text size as in the baseline condition? - Althea.Sanford commented on April 4th 20 at 01:08
@Althea.Sanford, Option 1.
As they say here: https://stackoverflow.com/questions/15544645/css3-...
You may want to reduce with scale transform child element by the formula 1/число_на_которое_увеличивается_родитель
For example to use transform: scale(0.9) at scale(1.1) parent

Option 2
Add child element which will be equal to 100% of the size of the parent(the button) and attribute to him the background and the transform scale at the tip and click. Next it will just span with the text that you just need to center - kenneth.Kihn46 commented on April 4th 20 at 01:11

Find more questions by tags CSSLayout