The best solution for implementing digital plus and minus buttons with pure CSS

Preface:

For the implementation of digital addition and subtraction buttons, many solutions have been used before, such as:

1. Use background images - This has a better effect, but the disadvantage is that the style control is a bit complicated and images are required;

2. Use "+" and "-" directly - this method is simple and crude, and the easiest to implement. The disadvantage is that the display is slightly different in different browser environments, and the size of the symbol and the thickness of the line are not easy to adjust;

3. Use unicode characters. This has almost the same problem as method 2, but the compatibility is not good, and some mobile phones have not been able to display the characters.

4. Use CSS style and tags to generate absolutely positioned horizontal and vertical lines, and then adjust their positions to form a plus sign. The disadvantage is that different browsers may have a slight misalignment of the horizontal and vertical combinations. This can be solved by using tags to generate two identical horizontal and vertical lines, and then rotating one of them 90 degrees, which will have a better effect.

For the above, the best one is the first one which uses pictures. Although it is a bit troublesome, it has the best effect and you don’t have to worry about compatibility. The others are not recommended.

Recently, I discovered a new method, which is to use background-image style of CSS3 and combine it with the linear gradient linear-gradient to synthesize the plus sign. The specific implementation is as follows.

Key code:

<a href="javascript:" class="btn btn_plus" role="button" title="Add"></a>
<input class="inputNum" value="1" size="1">
<a href="javascript:" class="btn btn_minus" role="button" title="Reduce"></a>
.inputNum {
    vertical-align: middle;
    height: 22px;
    border: 1px solid #d0d0d0;
    text-align: center;
}
.btn {
    display: inline-block;
    vertical-align: middle;
    background: #f0f0f0 no-repeat center;
    border: 1px solid #d0d0d0;
    width: 24px;
    height: 24px;
    border-radius: 2px;
    box-shadow: 0 1px rgba(100, 100, 100, .1);
    color: #666;
    transition: color .2s, background-color .2s;
}
.btn:active {
    box-shadow: inset 0 1px rgba(100, 100, 100, .1);
}
.btn:hover {
    background-color: #e9e9e9;
    color: #333;
}
.btn_plus {
    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px, 2px 10px;
}
.btn_minus {
    background-image: linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px;
}

Among them, the key styles are the two ends in bold at the end. It has been verified that this method has good compatibility, which can be said to be the same as h5/css3 compatibility.

This is the simplest implementation method I have ever seen. I admire the guy who thought of this usage.

Summarize

The above is the best solution for implementing digital addition and subtraction buttons with pure CSS introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!