今天给大家分享8种炫酷按钮的CSS实现。
现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个3D按钮
该按钮的立体效果主要由按钮多出的左、下两个侧面衬托出来，我们可以使用box-shadow模拟出这两个侧面：
HTML：
CSS:
效果：
加了box-shadow之后整体形状有点像了，但是立方体的左上和右下确缺了一块。通过观察我们发现，缺的这两块是三角形的，所以如果我们能构造两个三角形补到这两个角上就行了。用CSS画三角形对大家来说应该是基本操作了，如果还有同学不知道，下面的动画很好的解释了原理
我们使用::before和::after伪元素来分别绘制左上、右下的两个三角形，并通过绝对定位将它们固定到两个角落：
CSS：
接下来，我们需要实现点击时按钮被按下的效果，思路是点击时将按钮正面向左下角移动，同时减少box-shadow的偏移量以达到按钮底部固定不动的效果：
CSS：
最后，我们需要重新计算左上、右下两个三角形的尺寸和位置，以适应按下后上下缺口的变小：
CSS：
对于这种圆柱形的按钮，思路和上面矩形3D的按钮类似，也是通过box-shadow构造侧面呈现立体感。为了使效果更加真实，侧面的颜色呈现渐变效果，越往下颜色越深，因此我们可以通过叠加多层box-shadow来实现：
HTML：
CSS：
当点击按钮的时候，通过下移按钮和减少box-shadow的层数来实现按钮被按下的效果：
CSS：
提到渐变色大家一般都会想到background-image属性可以设置为linear-gradient以呈现渐变色的背景，事实上linear-gradient的类型属于
首先，我们实现渐变色的边框。
HTML：
CSS：
效果：
很奇怪，只有四个顶点有图像。这是因为border-image-slice默认为100%，所以导致四条边线上并没有分配背景图像。border-image-slice的用法参考 MDN，简而言之就是用四条（上下、左右各两条平行线，想象一下九宫格火锅。。）将图片切割成9块，在border的对应区域显示对应的图像切片，而border-image-slice的值就是那四条线的偏移量。这下大家应该能理解偏移量为100%的时候只有四个顶点上才有图片了吧。
所以我们需要调整border-image-slice的值，鉴于border-image-source为linear-gradient，我们需要将border-image-slice的值设置为1（表示四条线的偏移量都为1px）才能显示连续的渐变色背景：
CSS：
最后，我们只需要在鼠标悬浮的时候用渐变色填充按钮内部就行了，此处有两种实现，用 background-image 或者 将border-image-slice 设置为 fill （表示填充border中间的区域）：
CSS：
与上一种按钮类似，只不过颜色是逐渐变透明，实现也类似：
HTML：
CSS：
给按钮加上一个动态背景的思路是：先找一个可以repeat的背景图，然后使用keyframe自定义一段动画，当鼠标悬浮在按钮上的时候运行该动画：
HTML：
CSS：
该按钮的实现思路是：用 ::after 伪元素创建右侧的箭头，使用绝对定位固定在按钮右侧，静止状态下通过设置opacity: 0隐藏，当鼠标悬浮时，增大按钮的padding-right，同时增加箭头的不透明度，并将其位置往左移动：
HTML：
CSS：
这算是一个挺常见的开关按钮，它的实现思路是：
通过一个checkbox记录开关的状态，并隐藏该checkbox;使用一个
HTML：
CSS：
与开关按钮1类似，动画效果上更简单，只要切换颜色就行了：
HTML：
CSS：
