在各种UI组件库流行的今天，很少有人会用CSS自己实现一些效果。久而久之，css的水平越来越差，有空还是要多多练习。今天给大家分享8个炫酷按钮的CSS实现。1.目前主流的3D按钮1是扁平化设计，拟物化设计比较少见，所以我们只从技术角度分析如何实现这个3D按钮（本文只列出各种实现的关键代码，完整代码请参考SeeCodePen）。按钮的立体效果主要由按钮的左侧和底部来衬托。我们可以使用box-shadow来模拟这两个边：HTML:3DButton1CSS:.button-3d-1{position:relative;背景：橙红色；边框：无；白颜色;填充：15px24px；字体大小：1.4rem；大纲：无；box-shadow:-6px6px0hsl(16,100%,30%);}效果：加上box-shadow后，整体形状有点像，但是立方体的左上右下少了一块.通过观察，我们发现缺失的两块是三角形的，那么如果能构造两个三角形来填充这两个角就好了。用CSS画三角形应该是每个人的基本操作。如果还有不知道的同学，下面这个动图很好的解释了原理（代码参考Triangle）：我们使用::before和::after伪元素分别在左上角和右下角绘制两个三角形,并用绝对定位将它们固定在两个角上：CSS:.button-3d-1::before{content:"";显示：块；宽度：0；高度：0；位置：绝对；顶部：0；左：-6px；边框：6px实心透明；border-right:6pxsolidhsl(16,100%,30%);border-left-width:0px;}.button-3d-1::after{content:"";显示：块；宽度：0；高度：0；位置：绝对；底部：-6px；右：0；边框：6px实心透明；border-top:6pxsolidhsl(16,100%,30%);border-bottom-width:0px;}接下来我们要实现点击时按钮被按下的效果。思路是点击时将按钮前端移至左下角，同时减小box-shadowOffset，实现按钮底部固定效果：CSS:.button-3d-1:active{background:hsl(16,100%,40%);顶部：3px；左：-3px；box-shadow:-3px3px0hsl(16,100%,30%);}最后我们需要重新计算左上角和右下角的大小和位置，以适应按下后上下间隙的缩小:CSS:.button-3d-1:active::before{border:3pxsolidtransparent;border-right:3pxsolidhsl(16,100%,30%);左边框宽度：0px；左：-3px；}.button-3d-1:active::after{border:3pxsolidtransparent;border-top:3pxsolidhsl(16,100%,30%);边框底部宽度：0px；bottom:-3px;}Finaleffect:CodePen3DButton12.3D按钮2对于这个圆柱形按钮，思路和上面的矩形3D按钮类似，也是通过box-shadow的侧边呈现立体效果结构为了让效果更逼真，侧面的颜色呈现出渐变效果，颜色越往下越深，所以我们可以通过叠加多层box-shadow来实现：HTML:Circle!CSS:.button-3d-2{position:relative;背景：#ecd300；背景：径向渐变（hsl（54、100%、50%）、hsl（54、100%、40%））；字体大小：1.4rem；文本阴影：0-1px0#c3af07；白颜色;border:1pxsolidhsl(54,100%,20%);边界半径：100%；高度：120px；120像素；z-指数：4；大纲：无；框阴影：插入01px0hsl(54,100%,50%),02px0hsl(54,100%,20%),03px0hsl(54,100%,18%),04px0hsl(54,100%,16%),05px0hsl(54,100%,14%),06px0hsl(54,100%,12%),07px0hsl(54,100%,10)%),08px0hsl(54,100%,8%),09px0hsl(54,100%,6%);}点击按钮时，通过移动按下按钮并减少框阴影的层数：CSS:.button-3d-2:active{...top:2px;框阴影：插图01px0hsl(54,100%,50%),02px0hsl(54,100%,16%),03px0hsl(54,100%,14%),04px0hsl(54,100%,12%),05px0hsl(54,100%,10)%),06px0hsl(54,100%,8%),07px0hsl(54,100%,6%);}最终效果：CodePen3DButton23.Gradientbutton1提到了渐变色。认为可以将background-image属性设置为linear-gradient来呈现渐变背景。其实linear-gradient的类型属于，所以凡是可以用图片的属性都可以用linear-gradient代替，包括border-image这个按钮的实现关键是要实现一个渐变色和一个边框，当鼠标悬停时，边框和背景融合在一起。首先，我们实现渐变边框。HTML：GradientButton1CSS：.gradient-button-1{position:relative;z-索引：1；显示：内联块；填充：20px40px；字体大小：1.4rem；框大小：边框框；背景色：#e7eef1；颜色：橙红色；边框：实心10px透明；border-image:linear-gradient(totopright,orangered,yellow);}效果：奇怪，只有四个顶点有图像。这是因为border-image-slice默认是100%，所以没有在四个边框上分配背景图。border-image-slice的用法参考MDN。总之就是用了四条（上、下、左、右平行线，想象一下九宫格火锅。。)将图片裁剪成9块，在border对应的区域显示对应的imageslice，border-image-slice的值为四行的偏移量。现在大家应该明白了，当offset为100%的时候，四个顶点上就只有图片了。所以我们需要调整border-image-slice的值。由于border-image-source是linear-gradient，所以我们需要将border-image-slice的值设置为1（即四条线的偏移量为1px）来显示连续渐变色背景：CSS:.gradient-button-1{...border-image-slice:1;}最后我们只需要在鼠标悬停的时候给按钮内部填充渐变色即可。有两种实现方式，使用background-image或者设置border-image-slice进行填充（表示填充边框中间的区域）：CSS:.gradient-button-1:hover{color:white;背景图像：线性渐变（到右上角，橙红色，黄色）；/*or*/border-image-slice:1fill;}最终效果：CodePenGradientButton14.Gradientbutton2和前面的按钮类似，只是颜色逐渐变透明，实现也类似：HTML:渐变按钮2CSS:.gradient-button-2{...border:solid4pxtransparent;边框图像：线性渐变（向右，橙色，透明）；border-image-slice:1;}.gradient-button-2:hover{颜色：白色；背景图像：线性渐变（向右，橙色，透明）；border-right:none;}注意：悬停时需要设置border-right:none，否则右边框不会消失。最终效果：CodePenGradientButton25.动画按钮1给按钮添加动态背景的思路是：先找一张可以重复的背景图（可以去siteorigin生成），然后用keyframe来自定义动画。当鼠标悬停在按钮上时运行动画时：HTML:AnimatedButton1CSS:.animated-button-1{position:relative;显示：内联块；填充：20px40px；字体大小：1.4rem；背景色：#00b3b4；背景图像：url（“wave.png”）；背景大小：46px26px；边框：1px实心#555；白颜色;缓动0.3s;}.animated-button-1:hover{动画：挥动2s线性无限;}@keyframeswaving{from{background-position:00;}到{背景位置：46px0;}}注意：水平方向的background-position值需要等于背景图的宽度或其整数倍，这样动画循环时才能从头到尾平滑过渡。最终效果：CodePenAnimtedButton16.动画按钮2按钮的思路是：使用::after伪元素创建右侧的箭头，使用绝对定位固定在按钮右侧,并通过设置opacity:0在静态下隐藏它。当鼠标悬停时，增加按钮的padding-right，增加箭头的不透明度，并将其位置向左移动：HTML:AnimatedButton2CSS:.animated-button-2{位置：相对；填充：20px40px；字体大小：1.4rem；背景色：#00b3b4；背景大小：46px26px；边框：1px实心#555；全部缓和0.3s;}.animated-button-2::after{position:absolute;顶部：50%；右：0.6em；变换：翻译Y(-50%)；内容：”””;字体大小：1.2em；过渡：全部缓和0.3s；不透明度：0;}.animated-button-2:hover{填充：20px60px20px20px;}.animated-button-2:hover::after{right:1.2em;1;}最终效果：CodePenAnimatedButton27.开关按钮1这是一个很普通的开关按钮。它的实现思路是：通过一个checkbox记录开关的状态，隐藏checkbox；使用一个CSS:.toggle2{font-size:0.8rem;显示：内联块；垂直对齐：顶部；边距：015px00；}.toggle2-input{显示：无；}.toggle2-button{位置：相对；显示：内联块；行高：20px；转换：大写；背景：白色；颜色：#aaa；边框：1px实心#ccc；填充：5px10px5px30px；过渡：所有0.3s缓和；光标：指针；}.toggle2-button::before{位置：绝对；顶部：10px；左：10px；显示：内联块；宽度：10px；高度：10px；背景：#ccc；内容：””;过渡：所有0.3s缓和；-input:checked+.toggle2-button{背景：#00b3b4;边框颜色：#00b3b4；颜色：白色；}.toggle2-输入：checked+.toggle2-button::before{background:white;}最终效果：CodePenSwitchButton2本文参考：https://youtu.be/pmKyG3NBY_k
