Ri pro主题美化——按钮渐变色效果分享wordpress教程

摘要： 原版ri pro主题的按钮是灰色的，颜色太过低沉，美化之后，按钮会变成渐变色的效果。如下图：美化教程：直接在后台RiPro主题设置→顶部设置→自定义CSS样式代码 中添加以下代码：...

原版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; }

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