15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 如何通过CSS创建不同效果的按钮

如何通过CSS创建不同效果的按钮

时间:2023-07-24 12:33:02 | 来源:网站运营

时间:2023-07-24 12:33:02 来源:网站运营

如何通过CSS创建不同效果的按钮:


HTML代码

<div class="pm"> <button>平面按钮</button></div>

基础的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创建不同效果的按钮的详细内容。

关键词:效果,通过,创建

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭