这篇文章给大家分享的是有关CSS如何实现发光的按钮效果的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
以下代码是接下来所有按钮样式的基本代码:
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); }
效果如下:
感谢各位的阅读!关于CSS如何实现发光的按钮效果就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。