梦站博客-免费资源
  技术教程分享平台

纯CSS闪光按钮部署到WordPress短代码

CSS代码将以下代码添加到你的主题的style.css文件里面。

  1. /** From:精品资源分享* Url:https://www.52jiao.cn* Notice:转载请注明出处*/[class*=sgbtn]{display:inline-block;text-indent:0;position:relative;color:#fff;padding:0 10px 0 10px;min-width:160px;height:38px;line-height:38px;opacity:.8;text-align:center;font-family:Ubuntu,sans-serif;font-size:15px;text-decoration:none;border-radius:2px;overflow:hidden;-webkit-transition:all .15s ease-in;transition:all .15s ease-in}[class*=sgbtn]:before{content:”;position:absolute;background:#fff;width:25px;height:50px;top:0;left:-45px;opacity:.3;-webkit-transition:all .25s ease-out;transition:all .25s ease-out;-webkit-transform:skewX(-25deg);transform:skewX(-25deg)}[class*=sgbtn]:hover{opacity:.65}[class*=sgbtn]:hover:before{width:45px;left:205px}.sgbtn_blue{background:#1cb2f5}.sgbtn_red{background:#C00}.sgbtn_orange{background:#F90}.sgbtn_lv{background:#096}a[class*=sgbtn]{color:#fff}a[class*=sgbtn]:hover{color:#fff}

 

PHP代码将以下代码添加到主题的functions.php文件里面。

  1. /** From:憧憬点滴记忆* Url:http://www.52jiao.cn* Notice:转载请注明出处*//*添加蓝色闪光按钮*/function sg_blue($atts, $content = null) {    extract(shortcode_atts(array(        “href” => ‘http://’    ) , $atts));    return ‘<a class=”sgbtn_blue” href=”‘ . $href . ‘” target=”_blank” rel=”nofollow”>’ . $content . ‘</a>’;}add_shortcode(‘sgbtn_blue’, ‘sg_blue’);/*添加红色闪光按钮*/function sg_red($atts, $content = null) {    extract(shortcode_atts(array(        “href” => ‘http://’    ) , $atts));    return ‘<a class=”sgbtn_red” href=”‘ . $href . ‘” target=”_blank” rel=”nofollow”>’ . $content . ‘</a>’;}add_shortcode(‘sgbtn_red’, ‘sg_red’);/*添加橙色闪光按钮*/function sg_orange($atts, $content = null) {    extract(shortcode_atts(array(        “href” => ‘http://’    ) , $atts));    return ‘<a class=”sgbtn_orange” href=”‘ . $href . ‘” target=”_blank” rel=”nofollow”>’ . $content . ‘</a>’;}add_shortcode(‘sgbtn_orange’, ‘sg_orange’);/*添加绿色闪光按钮*/function sg_lv($atts, $content = null) {    extract(shortcode_atts(array(        “href” => ‘http://’    ) , $atts));    return ‘<a class=”sgbtn_lv” href=”‘ . $href . ‘” target=”_blank” rel=”nofollow”>’ . $content . ‘</a>’;}add_shortcode(‘sgbtn_lv’, ‘sg_lv’);

使用方法

  1. [sgbtn_blue href=’链接地址’]链接标题[/sgbtn_blue]    /*蓝色闪光*/[sgbtn_red href=’链接地址’]链接标题[/sgbtn_red]    /*红色闪光*/[sgbtn_orange href=’链接地址’]链接标题[/sgbtn_orange]    /*橙色闪光*/[sgbtn_lv href=’链接地址’]链接标题[/sgbtn_lv]    /*绿色闪光*/恒达娱乐

    无极荣耀

未经允许不得转载:emlog梦站 » 纯CSS闪光按钮部署到WordPress短代码