Button scale

[roman-koshchei]

The button in a form has 100% width. On hover, it scales too much: I think that's the reason why people prefer color change rather than scale.

Also during scale text inside the button is blurry. It's possible to use ::before to scale only the background, but still, there is a previous problem.

Buttons to fix

• [ ] primary
• [ ] primary outline
• [ ] secondary
• [ ] secondary outline
• [ ] contrast
• [ ] contrast outline

[roman-koshchei]

I tried to use box-shadow to add scale-like effect using size, not percent. It looks cool with a solid button. But a border button just does not work in such a method. So I will just switch to ::before for scaling. Yeah, it doesn't scale text, but it's even better. No more blur.

[roman-koshchei]

Scale kills me. I want to add scale down on a click. But if the cursor is out of the button in active state it will not be counted as a click.

https://user-images.githubusercontent.com/103932583/235919228-b981271b-a190-4721-bfcd-e6e71ad3f51b.mp4

[roman-koshchei]

I think I got it. Size is changed, not scale. ::before working. Just should remake styles for different buttons.

https://user-images.githubusercontent.com/103932583/236020662-00c9a899-2113-4581-aa8d-cb4700a00b5b.mp4

[roman-koshchei]

I came back to scale, but scale X much less than Y