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

6,350次阅读
26条评论

共计 2524 个字符,预计需要花费 7 分钟才能阅读完成。

前言

今天折腾了一下博客,添加了几个比较酷炫一点的按钮,同时也给这些按钮弄上了短代码,这样在编辑文章的时候更方便的进行操作,更能够增强文章的色彩性。

纯 CSS 闪光按钮部署到 WordPress 短代码教程 还没有看见是什么样式的?看看以下的按钮就知道了(PS:鼠标经过会进行光线划过)纯 CSS 闪光按钮部署到 WordPress 短代码教程

蓝色闪光

 

红色闪光

 

橙色闪光

 

绿色闪光

CSS 代码

将以下代码添加到你的主题的 style.css 文件里面。
/*
* From:憧憬点滴记忆
* Url:https://licoy.cn/2006.html
* 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}.t-primary{background:#1cb2f5}.t-danger{background:#C00}.t-warning{background:#F90}.t-primary{background:#096}a[class*=sgbtn]{color:#fff}a[class*=sgbtn]:hover{color:#fff}

PHP 代码

将以下代码添加到主题的 functions.php 文件里面。
/*
* From:憧憬点滴记忆
* Url:https://licoy.cn/2006.html
* Notice:转载请注明出处
*/
/* 添加蓝色闪光按钮 */
function sg_blue($atts, $content = null) {
    extract(shortcode_atts(array("href" => 'http://') , $atts));
    return '<a class="t-primary"href="' . $href . '"target="_blank"rel="nofollow">' . $content . '</a>';
}
add_shortcode('t-primary', 'sg_blue');
/* 添加红色闪光按钮 */
function sg_red($atts, $content = null) {
    extract(shortcode_atts(array("href" => 'http://') , $atts));
    return '<a class="t-danger"href="' . $href . '"target="_blank"rel="nofollow">' . $content . '</a>';
}
add_shortcode('t-danger', 'sg_red');
/* 添加橙色闪光按钮 */
function sg_orange($atts, $content = null) {
    extract(shortcode_atts(array("href" => 'http://') , $atts));
    return '<a class="t-warning"href="' . $href . '"target="_blank"rel="nofollow">' . $content . '</a>';
}
add_shortcode('t-warning', 'sg_orange');
/* 添加绿色闪光按钮 */
function sg_lv($atts, $content = null) {
    extract(shortcode_atts(array("href" => 'http://') , $atts));
    return '<a class="t-primary"href="' . $href . '"target="_blank"rel="nofollow">' . $content . '</a>';
}
add_shortcode('t-primary', 'sg_lv');

使用方法

链接标题
/* 蓝色闪光 */
链接标题
/* 红色闪光 */
链接标题
/* 橙色闪光 */
链接标题
/* 绿色闪光 */

后记

现在的网站越来越注重 UI 方面的设计了,这几天我一直都在纠结要不要更换主题或者是自己 DIY 主题呢,现在都是一个脑袋两个大了。纯 CSS 闪光按钮部署到 WordPress 短代码教程
沛霖主页

共计22人点赞,其中1人来自小程序

正文完
使用官方微信小程序体验更多功能
post-qrcode
 22
憧憬Licoy
版权声明:本站原创文章,由 憧憬Licoy 2016-08-25发表,共计2524字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(26条评论)
软件分享 评论达人 LV.1
2020-12-12 23:10:55 回复

感谢分享,谢谢站长!!@绿软吧

 Windows  Chrome  中国福建省厦门市电信
小安 评论达人 LV.1
2017-09-19 10:23:08 回复

:sad: 表示替换了后没有效果

 Windows  Chrome  中国四川省德阳市电信
明月登楼的博客 评论达人 LV.2
2016-12-27 17:15:07 回复

鸟哥的主题还是不要换了!绝对是值得拥有的主题!短代码我也很喜欢,最近想研究一下如何集成到WordPress的编辑器上去!

 Windows  Chrome  中国河南省南阳市电信