最新公告
  • 欢迎您光临玖居暗巷,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 【WordPress美化】Ripro主题按钮特效

    一.如果是RiPro主题,请在后台顶部设置添加自定义CSS。其他主题在对应的CSS样式添加。(其他主题注意按钮名)

    /*
    按钮加彩
    */
    .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;
    }
    

     

    完.

    二.更新到3.2的请把diy.css样式复制到后台主题顶部设置-自定义CSS。

    1、演示如本站所示

    2、按钮加动态渐变效果

    添加目录wp-content/themes/ripro/assets/css diy.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;
    }

    完.

    ①本站资源仅用于学习和交流,勿用于商业。切勿私自传播于网络,将会追究法律责任。
    ②本站其他资源来源网络或者用户投稿,供学习交流之用。如有侵权请联系删除。
    ③如有链接无法下载、失效或广告,请联系管理员处理!
    ④本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    ⑤如果你也有好源码或者教程,可以到审核区发布,分享有本站专属货币奖励和额外收入!
    ⑥如遇到加密压缩包,默认解压密码为"jiuqing97.top",如遇到无法解压的请联系管理员!

    玖居暗巷 » 【WordPress美化】Ripro主题按钮特效

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于网页模版、APP源码等类型的资源,文章内用于介绍的图片通常并不包含在对应可供下载资源包内。这些相关商业资源需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些文件也是这种情况,但部分资源会在资源包内有一份下载链接清单。
    玖居暗巷
    一个高级程序员模板开发平台

    Leave a Reply