CSS实现8种炫酷按钮

今天给大家分享8种炫酷按钮的CSS实现。

1. 3D按钮1

现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个3D按钮

该按钮的立体效果主要由按钮多出的左、下两个侧面衬托出来，我们可以使用box-shadow模拟出这两个侧面：

HTML：

3D Button 1

CSS:

.button-3d-1{
  position: relative;
  background: orangered;
  border: none;
  color: white;
  padding: 15px 24px;
  font-size: 1.4rem;
  outline: none;
  box-shadow: -6px 6px 0 hsl(16, 100%, 30%);
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

效果：

加了box-shadow之后整体形状有点像了，但是立方体的左上和右下确缺了一块。通过观察我们发现，缺的这两块是三角形的，所以如果我们能构造两个三角形补到这两个角上就行了。用CSS画三角形对大家来说应该是基本操作了，如果还有同学不知道，下面的动画很好的解释了原理

我们使用::before和::after伪元素来分别绘制左上、右下的两个三角形，并通过绝对定位将它们固定到两个角落：

CSS：

.button-3d-1::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: -6px;
  border: 6px solid transparent;
  border-right: 6px solid hsl(16, 100%, 30%);
  border-left-width: 0px;
}

.button-3d-1::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  bottom: -6px;
  right: 0;
  border: 6px solid transparent;
  border-top: 6px solid hsl(16, 100%, 30%);
  border-bottom-width: 0px;
}

接下来，我们需要实现点击时按钮被按下的效果，思路是点击时将按钮正面向左下角移动，同时减少box-shadow的偏移量以达到按钮底部固定不动的效果：

CSS：

.button-3d-1:active {
  background: hsl(16, 100%, 40%);
  top: 3px;
  left: -3px;
  box-shadow: -3px 3px 0 hsl(16, 100%, 30%);
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

最后，我们需要重新计算左上、右下两个三角形的尺寸和位置，以适应按下后上下缺口的变小：

CSS：

.button-3d-1:active::before {
  border: 3px solid transparent;
  border-right: 3px solid hsl(16, 100%, 30%);
  border-left-width: 0px;
  left: -3px;
}

.button-3d-1:a