background:
The screen of the applet on the mobile phone is too small, but you want to put a lot of elements. At this time, when you click on the area, the probability of hitting the element is very low, especially when there is an input box next to it. Generally, the input will be hit first.
It is hoped that the click area can be enlarged without layout or deformation.
First look at the effect:
Solution:
Pass: transform: sale(2);
The x and y directions are doubled. In the original space, other elements will basically not be squeezed and deformed, and the background of the device can be transparent without occlusion.
background-color: rgba(2, 245, 245, 0.1);
Refer to other sharing methods 2:
A similar effect can be achieved by overlaying a :amplified transparent layer on top of the button. In this way, the original button will not be deformed.
.add::after,.minus::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: scale(1.5);
border: 1px solid lightgray
}