本文共 1669 字，大约阅读时间需要 5 分钟。

• 通过CSS可以实现多种按钮效果，比如通过CSS渐变属性可以设置颜色渐变的效果按钮，通过 box-shadow实现按下效果按钮等
• 今天在本篇文章中将分享如何制作几种不同样式的按钮效果，它们分别是平面，边框，渐变和阴影以及按下样式按钮。接下来在文章中将和大家详细介绍如何通过CSS代码来实现效果。

——各位小伙伴在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提升，对此我整理了一些资料笔记视频，包括HTML/CSS/javaScript/Vue等多个web前端基础知识点进阶干货需要的可以免费分享给大家，有需要者请进群点击进入1045267283

HTML代码

   
 
    平面按钮
   

基础的CSS样式代码

button{display: inline-block;margin: 0 10px 0 0;padding: 15px 45px;font-size:20px;font-family:"Bitter",serif;line-height: 20px;appearance: none; box-shadow:none; border-radius: 0;}

（1）平面样式CSS按钮

平面样式按钮的使用现在非常流行，并且符合无处不在的平面设计趋势。，这些的平面样式按钮效果很好看。以下代码是按钮处于正常的情况下的状态

.pm button { color:#fff; background-color:#6496c8; border:none;}

效果图：

（2）边框样式CSS按钮

边框样式按钮与平面按钮属于同一类。唯一的区别是，我们将使用边框来代替平面按钮所使用的背景颜色。以下代码是按钮处于正常的情况下的状态

.pm button { color:#444; border:5px solid #6496c8; background-color: #fff;}

效果图：

（3）渐变和阴影样式CSS按钮

这种渐变和阴影样式的按钮更加符合我们在过去的日子里所看到的按钮效果。如果你喜欢那些颜色多彩的那么渐变/阴影样式的按钮适合您。创建这款按钮的好处是它的效果全部由CSS完成，因此可以轻松的对其放大或缩小而不必担心会丢失分辨率，或者必须创建新图像。以下代码是按钮处于正常的情况下的状态

.pm button { color:#fff; text-align: center; box-shadow:inset 0 0 0 1px #e91e637d;  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, rgb(244,103,34), rgb(197,29,124)); background: -moz-linear-gradient(right, rgb(244,103,34), rgb(197,29,124));  background: linear-gradient(to right, rgb(244,103,34) , rgb(197,29,124));}}

效果图：

（4）按样式CSS按钮

这些“按下”式按钮结合了一些平面设计和假象，让用户感觉他们实际上按下了按钮。当用户按下它时，它似乎陷入了页面。它的实现需要用到阴影来设置，使其具有3D弹出外观。以下代码是按钮处于正常的情况下的状态

.pm button { color: #fff; background-color: #6496c8; border: none; border-radius: 15px; box-shadow: 0 10px #27496d;}

效果图：

总结：以上就是本篇文章的全部内容了，希望通过这篇文章可以让大家学会使用CSS来制作按钮效果。

以上就是如何通过CSS创建不同效果的按钮的详细内容。

转载地址：https://blog.csdn.net/lin123_00/article/details/105798158 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！