RiPro主题美化:按钮渐变色效果

原版ripro主题的按钮是灰色的,颜色太过低沉,美化之后,按钮会变成蓝紫色渐变的效果。

美化教程

直接在后台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;
}

人已赞赏
WordPress美化

RiPro主题美化:右侧滚动条样式

2020-7-26 13:20:07

WordPress美化

WordPress邮件通知系统加强与美化

2020-7-27 22:42:24

⚠️
恩月阁文章由星九进行编写或整理,部分内容来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
若无意中侵害到您的权益,请发送邮件至 xingjiu@nuue.cn 或点击右侧 私信:星九 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索