wordpress小工具模块给网站侧边栏添加渐变色按钮代码

其实网站侧边栏添加各种功能模块是网站程序自带的功能，比如wordpress小工具模块就可以添加不同的功能。但是默认的模块功能只是起到基本的实用效果，想要美观还是要自己进行改造，今天分享一个渐变色的侧边栏广告代码模块。

1、添加css代码：

将下面的css代码添加到网站的style.css文件中，如果是wordpress建的站，那么就添加到使用的主题css文件里面。

/*渐变色模块样式 chukuangren.com*/
.cel{display:block; padding:20px 15px; text-align:center; color:#fff!important; background:#ff5719; 
background-image:-webkit-linear-gradient(135deg,#bbafe7,#5368d9); background-image:linear-gradient(135deg,#bbafe7,#5368d9)}
.cel h4{margin:0; font-size:22px; font-weight:bold}.cel h5{margin:10px 0 0; font-size:14px; font-weight:bold}
.cel.cel-btn{margin-top:20px; font-weight:bold}.cel.cel-btn:hover{color:#ff5719}.cel-btn{display:inline-block; font-weight:normal; 
margin-top:10px; color:#666; text-align:center; vertical-align:top; user-select:none; border:none; padding:0 36px; line-height:38px; 
font-size:14px; border-radius:10px; outline:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; 
transition:all 0.3s ease-in-out}.cel-btn:hover,.btn:focus,.btn.focus{outline:0; text-decoration:none}
.cel-btn:active,.btn.active{outline:0; box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.cel-btn-outline{line-height:36px; color:#fff; 
background-color:transparent; border:1px solid#fff}.cel-btn-outline:hover,.btn-outline:focus,.btn-outline.focus{color:#343a3c; 
background-color:#fff}

2、DIV代码：

前面的侧边栏广告代码放到你网站的sidebar文件中，使用wordpress的可以打开后台——外观——小工具——自定义HTML。

<a style="border-radius:5px;text-decoration:none" class="cel" href="https://www.chukuangren.com" target="_blank" rel="nofollow">
<h4>楚狂人</h4>
<h5>分享是一种美德</h5>
<span class="cel-btn cel-btn-outline">立即进入</span></a>

效果如下：

如果你实在太懒的话，也可以不用分开设置，直接二合一放到wordpress小工具模块也行。

<a style="border-radius:5px;text-decoration:none" class="cel" href="https://www.chukuangren.com/goto/axl5" target="_blank" rel="nofollow">
<h4>阿里云服务器 99元</h4>
<h5>2核2G 3M 40G硬盘</h5>
<span class="cel-btn cel-btn-outline">立即进入</span></a>
<style>
.cel{display:block; padding:20px 15px; text-align:center; color:#fff!important; background:#ff5719; background-image:-webkit-linear-gradient(135deg,#bbafe7,#5368d9); background-image:linear-gradient(135deg,#bbafe7,#5368d9)}.cel h4{margin:0; font-size:22px; font-weight:bold}.cel h5{margin:10px 0 0; font-size:14px; font-weight:bold}.cel.cel-btn{margin-top:20px; font-weight:bold}.cel.cel-btn:hover{color:#ff5719}.cel-btn{display:inline-block; font-weight:normal; margin-top:10px; color:#666; text-align:center; vertical-align:top; user-select:none; border:none; padding:0 36px; line-height:38px; font-size:14px; border-radius:10px; outline:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out}.cel-btn:hover,.btn:focus,.btn.focus{outline:0; text-decoration:none}
.cel-btn:active,.btn.active{outline:0; box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.cel-btn-outline{line-height:36px; color:#fff; background-color:transparent; border:1px solid#fff}.cel-btn-outline:hover,.btn-outline:focus,.btn-outline.focus{color:#343a3c; background-color:#fff}
</style>