本文作者:花雾影

Ri pro主题美化——按钮渐变色效果

花雾影1年前 ( 2020-03-04 )21758抢沙发
Ri pro主题美化——按钮渐变色效果摘要: 原版ri pro主题的按钮是灰色的,颜色太过低沉,美化之后,按钮会变成渐变色的效果。如下图:美化教程:直接在后台RiPro主题设置→顶部设置→自定义CSS样式代码 中添加以下代码:...

原版ri pro主题的按钮是灰色的,颜色太过低沉,美化之后,按钮会变成渐变色的效果。如下图:

渐变按钮.PNG Ri pro主题美化——按钮渐变色效果 渐变色 ripro主题 第1张

美化教程:

直接在后台ripro主题设置→顶部设置→自定义CSS样式代码 中添加以下代码

/**====按钮加彩====*/ button,html [type="reset"],[type="submit"] {    /* -webkit-appearance: button;    background-image: -Webkit-linear-gradient(45deg,#f35626,#feab3a);     -Webkit-animation: hue 6s infinite linear;*/     display: inline-block;     background: #42a7ff;     background-image: -webkit-gradient(linear, left top, right top, from(#9c4dff), to(#42a7ff));     background-image: -webkit-linear-gradient(left, #9c4dff 0%, #42a7ff 100%);     background-image: -o-linear-gradient(left, #9c4dff 0%, #42a7ff 100%);     background-image: linear-gradient(90deg, #9c4dff 0%, #42a7ff 100%);     -webkit-border-radius: 3px;     border-radius: 3px;     -webkit-transition: all 0.2s ease-out 0s;     -o-transition: all 0.2s ease-out 0s;     transition: all 0.2s ease-out 0s;     vertical-align: top; } .btn--primary,.btn--secondary,.label-default,.label-warning,.fa-angle-up,.rollbar-item tap-dark,.rollbar-item{     display: inline-block;     background: #42a7ff;     background-image: -webkit-gradient(linear, left top, right top, from(#9c4dff), to(#42a7ff));     background-image: -webkit-linear-gradient(left, #9c4dff 0%, #42a7ff 100%);     background-image: -o-linear-gradient(left, #9c4dff 0%, #42a7ff 100%);     background-image: linear-gradient(90deg, #9c4dff 0%, #42a7ff 100%);     -webkit-border-radius: 3px;     border-radius: 3px;     -webkit-transition: all 0.2s ease-out 0s;     -o-transition: all 0.2s ease-out 0s;     transition: all 0.2s ease-out 0s;     vertical-align: top; } .edit--profile-links li a.active {     background: #42a7ff;     background-image: -webkit-gradient(linear, left top, right top, from(#9c4dff), to(#42a7ff));     background-image: -webkit-linear-gradient(left, #9c4dff 0%, #42a7ff 100%);     background-image: -o-linear-gradient(left, #9c4dff 0%, #42a7ff 100%);     background-image: linear-gradient(90deg, #9c4dff 0%, #42a7ff 100%);     -webkit-border-radius: 3px;     border-radius: 3px;     -webkit-transition: all 0.2s ease-out 0s;     -o-transition: all 0.2s ease-out 0s;     transition: all 0.2s ease-out 0s;     vertical-align: top; }


添加完成后,你会发现主题所有按钮全都变成了渐变色效果,喜欢的朋友赶紧试试吧。

文章版权及转载声明

作者:花雾影本文地址:https://www.shuipo.net/blog/86.html发布于 1年前 ( 2020-03-04 )
文章转载或复制请以超链接形式并注明出处水泊网

赞(

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,21758人围观)参与讨论

还没有评论,来说两句吧...