RiPro主题美化之实现按钮呼吸灯特效

RiPro按钮呼吸灯特效效果,看起来还是非常炫酷的。在暗黑模式下也是会变色的,而且阿夜感觉比白色好看很多。有需要的兄弟们可以体验一下。

首先登录你自己的网站后台,之后依次找到RiRro主题设置——顶部设置——自定义CSS样式代码。然后添加以下CSS代码就可以了。[rihide]

/**====按钮加彩====*/ 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,.comments-area .comment-author-name .fn.vip{ 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; }
/*按钮加彩*/
.navbar .user-pbtn,.navbar .navbar-button, .off-canvas .canvas-close,.burger,.btn--block{
     background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a);
    -webkit-animation: hue 6s infinite linear;
    border: 0;
  color: #34495e;
}
.burger:before, .burger:after {
    background-color: #0056ff;
}

[/rihide]

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论