今天介绍几个比较常见的又比较有趣的按钮样式，动态的展示效果如下：
动态演示
第一种样式是鼠标放上去之后有一个角会翻上来，点击之后会有白色的阴影显示。实现原理是button标签的基础上覆盖一个比较小的盒子，在鼠标放上去的时候将它的宽高变大加上一个过渡效果便瞒天过海的实现了这个样式。
其中transition过渡动画有以下几个属性：transition-property：设置元素中参与过渡的属性；transition-duration：设置元素过渡的持续时间；transition-timing-function：设置元素过渡的动画类型；transition-delay：设置过渡效果延迟的时间，默认为 0；具体的网上比较多也超级好，我个菜鸟就不献丑了。CSS3-transition过渡动画详解 - 掘金 (juejin.cn)
公用
第一个按钮的具体css
第二种样式是看着有点折叠的感觉，具体实现是通过给button标签设置多个盒子阴影实现的。其中盒子阴影box-shadow语法： 外阴影：box-shadow: X轴 Y轴 Rpx color; 属性说明（顺序依次对应）： 阴影的X轴(可以使用负值); 阴影的Y轴(可以使用负值); 阴影模糊值;默认是外阴影 。内阴影：inset 可以设置成内部阴影。在 css中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：hsla(hue, saturation, lightness)
第二个css
第三个当鼠标放在按钮上去之后，按钮有渐变颜色动态变化。其实现方式则是动画animation，与上面的过渡动画transition有一定的区别。格式：animation: 自定义名字 持续时间 动画类型 延迟时间 次数;通常结合@keyframes 前面自定义名称{}使用。具体的属性值可以查看CSS 动画 | 菜鸟教程 (runoob.com)
第三个css
第四个的实现方式是在按钮的基础上使用伪类:after、before遮挡按钮的上下两条边框实[类的图案，之后在鼠标放到按钮上去的时候使用transform属性的scale()方法来缩放伪类取消遮挡并在内部用box-shadow: inset添加阴影实现色彩的填充。为方便看截了一张图。
展示
第四张css
希望路过的大佬不要嫌弃，若有不对之处还望指正为谢!
网友评论