antdesign按钮⿏标放上去变⾊_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 效果：
加了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 sol
接下来，我们需要实现点击时按钮被按下的效果，思路是点击时将按钮正⾯向左下⾓移动，同时减少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%);}
最后，我们需要重新计算左上、右下两个三⾓形的尺⼨和位置，以适应按下后上下缺⼝的变⼩：
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:active 2. 3D按钮2
对于这种圆柱形的按钮，思路和上⾯矩形3D的按钮类似，也是通过box-shadow构造侧⾯呈现⽴体感。为了使效果更加真实，侧⾯的颜⾊
呈现渐变效果，越往下颜⾊越深，因此我们可以通过叠加多层box-shadow来实现：
HTML：
Circle!
CSS：
.button-3d-2{ position: relative; background: #ecd300; background: radial-gradient(hsl(54, 100%, 50%), hsl(54, 100%, 40%)); font-size: 1.4rem; text-shado 当点击按钮的时候，通过下移按钮和减少box-shadow的层数来实现按钮被按下的效果：
CSS：
.button-3d-2:active{ ... top: 2px; box-shadow: inset 0 1px 0 hsl(54, 100%, 50%), 0 2px 0 hsl(54, 100%, 16%), 0 3px 0 hsl(54, 100%, 14%), 0 4px 0 hsl(54, 1 3. 渐变按钮1
提到渐变⾊⼤家⼀般都会想到background-image属性可以设置为linear-gradient以呈现渐变⾊的背景，事实上linear-gradient的类型属
于的⼀种，所以凡是可以使⽤图⽚的属性都可以⽤linear-gradient代替，包括border-image。实现这个按钮的关键在于实现⼀个渐变⾊和
边框，⽽且当⿏标悬浮的时候边框和背景融为⼀体。
⾸先，我们实现渐变⾊的边框。
HTML：
Gradient Button 1
CSS：
.
gradient-button-1{ position: relative; z-index: 1; display: inline-block; padding: 20px 40px; font-size: 1.4rem; box-sizing: border-box; background-color: #e7eef1; c 效果：
很奇怪，只有四个顶点有图像。这是因为border-image-slice默认为100%，所以导致四条边线上并没有分配背景图像。border-image-
slice的⽤法参考 MDN，简⽽⾔之就是⽤四条(上下、左右各两条平⾏线，想象⼀下九宫格⽕锅。。)将图⽚切割成9块，在border的对应区
域显⽰对应的图像切⽚，⽽border-image-slice的值就是那四条线的偏移量。这下⼤家应该能理解偏移量为100%的时候只有四个顶点上才
borderbox有图⽚了吧。
所以我们需要调整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 设置为 fill (表⽰填充border中间的区域)：
CSS：
.gradient-button-1:hover{ color: white; background-image: linear-gradient(to top right, orangered, yellow); /* 或者 */ border-image-slice: 1 fill;}
4. 渐变按钮2
与上⼀种按钮类似，只不过颜⾊是逐渐变透明，实现也类似：
HTML：
Gradient Button 2
CSS：
.gradient-button-2{ ... border:solid 4px transparent; border-image: linear-gradient(to right, orangered, transparent); border-image-slice: 1;}.gradient-button-2:hove 注意点：当hover的时候需要设置 border-right: none，否则右侧边框⽆法呈现消失的状态。
5. 动画按钮1
给按钮加上⼀个动态背景的思路是：先⼀个可以repeat的背景图，然后使⽤keyframe⾃定义⼀段动画，当⿏标悬浮在按钮上的时候运⾏
该动画：
HTML：
Animated Button 1
CSS：
.animated-button-1{ position: relative; display: inline-block; padding: 20px 40px; font-size: 1.4rem; background-color: #00b3b4; background-image: url("wave.png 注意点：background-position ⽔平⽅向的值需要等于背景图⽚的宽度或其整数倍，这样动画循环播放的时候⾸尾才能平稳过渡。
6. 动画按钮2
该按钮的实现思路是：⽤ ::after 伪元素创建右侧的箭头，使⽤绝对定位固定在按钮右侧，静⽌状态下通过设置opacity: 0隐藏，当⿏标悬
浮时，增⼤按钮的padding-right，同时增加箭头的不透明度，并将其位置往左移动：
HTML：
Animated Button 2
CSS：
.animated-button-2{ position: relative; padding: 20px 40px; font-size: 1.4rem; background-color: #00b3b4; background-size: 46px 26px; border: 1px solid #555;  c 7. 开关按钮1
这算是⼀个挺常见的开关按钮，它的实现思路是：
1. 通过⼀个checkbox记录开关的状态，并隐藏该checkbox;
2. 使⽤⼀个 作为整个按钮容器，并通过 for 属性与checkbox关联，这样点击按钮的任何地⽅都能改变checkbox的状态；
3. 使⽤⼀个 作为按钮可视的部分，并作为 checkbox 的相邻元素，这样通过 checkbox的伪类选择器 :checked 和相邻选择器 + 选中
并显⽰不同状态下的内容。
HTML：
CSS：
.toggle1{ vertical-align: top; width: 80px; display: block; margin: 100px auto;}.toggle1-input{ display: none;}.toggle1-button{ position: relative; display: inline-block;
注意点： 的 for 属性的作⽤；:checked 伪类的使⽤；+ 相邻选择器的使⽤。
8. 开关按钮2
与开关按钮1类似，动画效果上更简单，只要切换颜⾊就⾏了：
HTML：
Click to activateweb前端开发学习Q-q-u-n： 784783012 ，分享学习的⽅法和需要注意的⼩细节，不停更新最新的教程和学习⽅法(详细的前端项⽬实战教学视频，PD CSS：
.toggle2{ font-size: 0.8rem; display: inline-block; vertical-align: top; margin: 0 15px 0 0;}.toggle2-input{ display: none;}.toggle2-button{ position: relative; display: in

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。