首页 / CSS / CSS实现发光的按钮效果(代码示例)
CSS实现发光的按钮效果(代码示例)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS实现发光的按钮效果(代码示例),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1935字,纯文字阅读大概需要3分钟。
内容图文
![CSS实现发光的按钮效果(代码示例)](/upload/InfoBanner/zyjiaocheng/418/b787b2071cd04de3b6c67606b57fed5b.jpg)
话不多说,我们直接来看代码
以下代码是接下来所有按钮样式的基本代码:
HTML
<a class="button" href="#">Button</a>
CSS
.button { width:80px; height:20px; display: block; padding: 1em 3.2em; border-radius: 1.6em; color: #fff; font-size: 18px; font-family: 'Lato', sans-serif; font-weight: 700; text-align: center; text-decoration: none; }
下面button1到button4改变的是基本颜色,并且还通过box-shadow调整按钮主体的颜色透射率来描述用于每个按钮的阴影。从button5开始设计具有渐变效果的按钮。下面我们来看具体的代码实现。
button1:
.button { background-color: rgba(252, 28, 143, 1); box-shadow: 0 5px 20px rgba(252, 28, 143, .5); }
效果如下:
button2:
.button{ background-color: rgba(251, 152, 11, 1); box-shadow: 0 5px 20px rgba(251, 152, 11, .5); }
效果如下:
button3:
.button { background-color: rgba(241, 196, 15, 1); box-shadow: 0 5px 20px rgba(241, 196, 15, .5); }
效果如下:
button4:
.button { background-color: rgba(0, 63, 255, 1); box-shadow: 0 5px 20px rgba(0, 63, 255, .5); }
效果如下:
button5:
基本外观是“button4”,box-shadow通过设置阴影来改变附着在下面的阴影的位置。
.button { background-color: rgba(0, 63, 255, 1); box-shadow: 0 0 40px rgba(0, 63, 255, .7); }
效果如下:
button6:
这是我们添加到inset指定的“button4” 位置的box-shadow。
.button { background-color: rgba(0, 63, 255, 1); box-shadow: 0 5px 20px rgba(0, 63, 255, .5), 0 0 40px rgba(255, 255, 255, .5) inset; }
效果如下:
button7:
使用渐变的类型按钮,将不同颜色和调整角度的组合。
.button { background: linear-gradient(-45deg, rgba(87, 225, 181, 1) 0%, rgba(0, 63, 255, 1) 100%); box-shadow: 0 5px 20px rgba(0, 63, 255, .5); }
效果如下:
以上就是本篇文章的全部内容,更多其他精彩内容可以参考Gxlcms的视频教程栏目中的CSS视频教程和CSS3视频教程栏目!!!
以上就是CSS实现发光的按钮效果(代码示例)的详细内容。
内容总结
以上是互联网集市为您收集整理的CSS实现发光的按钮效果(代码示例)全部内容,希望文章能够帮你解决CSS实现发光的按钮效果(代码示例)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。