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

前几天无聊转博客，在一个博客里发现了一个很炫的闪光按钮短代码，粗略保存了一下，但却不知道是哪位博主发布的，这个短代码效果是，鼠标放上去会有一道白光快速闪过，想必大家脑海中已经生成了这个效果，下面整理一下代码发布出来；

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

[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}

将以下代码添加到主题的函数文件下：

/*
* Url：https://www.waizhuti.com/623.html
*/
function sg_blue($atts, $content = null) {
    extract(shortcode_atts(array(
        "href" => 'http://'
    ) , $atts));
    return '<a class="sgbtn_blue" href="'%20.%20$href%20.%20'" 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="'%20.%20$href%20.%20'" 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="'%20.%20$href%20.%20'" 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="'%20.%20$href%20.%20'" target="_blank" rel="nofollow">' . $content . '</a>';
}
add_shortcode('sgbtn_lv', 'sg_lv');

使用方法:

[sgbtn_blue href='链接地址']链接标题[/sgbtn_blue]    /*蓝色闪光*/
[sgbtn_red href='链接地址']链接标题[/sgbtn_red]    /*红色闪光*/
[sgbtn_orange href='链接地址']链接标题[/sgbtn_orange]    /*橙色闪光*/
[sgbtn_lv href='链接地址']链接标题[/sgbtn_lv]    /*绿色闪光*/

按照以上方法，你就可以实现你脑海中的效果了....喜欢个性的同学可以试试，自己感觉有点太炫了，晃眼...