纯css实现按钮防抖

属性了解

pointer-events

none：该元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器 (鼠标的动作将不能被该元素及其子元素所捕获，但是能够被其父元素所捕获)。
auto：默认值，表示指针事件已启用；此时元素会响应指针事件，阻止这些事件在其下面的元素上触发。对于 SVG 内容，该值与 visiblePainted 效果相同。
inherit：将使用 pointer-events 元素的父级的值。

animation
CSS3 animation（动画） 属性

伪类:active
CSS :active 选择器

实现

<button onclick="console.log('保存了')">保存</button>

先写一个动画实现从禁用到可点击的变化：
@keyframes throttle {
    
    
  from {
    
    
    pointer-events: none;
  }
  to {
    
    
    pointer-events: all;
  }
}

然后将动画绑定到按钮上：
button{
    
    
  animation: throttle 2s step-end forwards;
}

点击时候将动画清空，点击后动画开始：
button:active{
    
    
  animation: none;
}

可以在动画中加上提示色，表示禁用：
@keyframes throttle {
    
    
  from {
    
    
    color: red;
    pointer-events: none;
  }
  to {
    
    
    pointer-events: all;
  }
}