button按钮阻止双击选中文字

一般我们用span标签模拟按钮时总会遇到这样一种情况,即双击按钮时会触发系统的选中文字。
解决方案给按钮加上user-select: none;这个属性。

这样就结束了吗?并没有!我们拓展一下,除了点击触发的事件以外如何让用户感知到他是实实在在的点击了按钮?当然是加上一些小动画了,来看demo
关键代码如下:

1
2
3
4
5
6
7
8
.btn:active {
transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.btn{
position: relative;
box-shadow: 0px 5px 0px 0px #67C23A;
}

button按钮阻止双击选中文字
https://xypecho.github.io/2019/02/20/button按钮阻止双击选中文字/
作者
很青的青蛙
发布于
2019年2月20日
许可协议