用css写一个特效动画按钮

以下是一个简单的用CSS实现的按钮特效动画示例：

HTML代码：

<button class="btn">点击我</button>

CSS代码：

.btn {
  background-color: #ffb347;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.btn:after {
  content: '';
  position: absolute;
  top: -120%;
  left: -120%;
  width: 200%;
  height: 200%;
  background-color: #fff;
  opacity: 0;
  transform: rotate(45deg);
  transition: all 0.8s ease-in-out;
}

.btn:hover {
  background-color: #ff8c00;
}

.btn:hover:after {
  top: -30%;
  left: -30%;
  opacity: 1;
}

解释：

- `btn` 类为按钮样式的基本样式；
- `btn:after` 为按钮鼠标悬停时的效果，设置了一个绝对定位的伪元素，使用 `transform` 属性将其旋转 45 度，使用 `transition` 属性设置过渡效果；
- `btn:hover` 为按钮鼠标悬停时的基本样式，改变了 `background-color` 属性；
- `btn:hover:after` 为按钮鼠标悬停时的伪元素样式，改变了 `top`、`left` 和 `opacity` 属性，实现了从四个角落逐渐展开的效果。

效果展示：https://codepen.io/pen/?editors=1100