原版ri pro主题的按钮是灰色的,颜色太过低沉,美化之后,按钮会变成渐变色的效果。如下图:
美化教程:
直接在后台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; }
还没有评论,来说两句吧...