云服务器
云主机评测

纯代码为wordpress网站侧边栏增加好看的按钮

阿里云代金券 腾讯云代金券 VULTR优惠码 Ucloud云主机

我们平时在自己建站的过程中,经常会遇到需要用按钮对超链接进行美化的需求。这个功能wordpress有很多插件可以实现,比如 Forget About Shortcode Buttons 这个插件就可以让你给超链接添加好看的按钮。但是有的朋友只是偶尔使用一次,不想为网站安装太多插件增加服务器的负担,那么其实我们还可以使用纯代码为网站添加好看的按钮。

比如本站侧边栏的这几个按钮,就是用简单的代码做出来的。

div+css 按钮

代码也很简单:

<table border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="text-align: center;"><a class="fasc-button fasc-size-xlarge fasc-type-flat" style="background-color: #f08828; color: #ffffff;" target="_blank" rel="nofollow noopener" href="">第一行按钮内容</a></td>
</tr>
<tr>
<td style="text-align: center;"><a class="fasc-button fasc-size-xlarge fasc-type-flat" style="background-color: #1741e8; color: #ffffff;" target="_blank" rel="nofollow noopener" href="">第二行按钮内容</a></td>
</tr>
<tr>
<td style="text-align: center;"><a class="fasc-button fasc-size-xlarge fasc-type-flat" style="background-color: #7f1ce8; color: #ffffff;" target="_blank" rel="nofollow" href="">第三行按钮内容</a></td>
</tr>
<tr>
<td style="text-align: center;"><a class="fasc-button fasc-size-xlarge fasc-type-flat" style="background-color: #ff520d; color: #ffffff;" target="_blank" rel="nofollow noopener" href="">第四行按钮内容</a></td>
</tr>
</tbody>
</table>

方法比较简陋,但是可以实现给wordpress侧边栏添加按钮目的就可以了,有精力的朋友可以使用CSS再美化一下。我这里也收集了一些比较好的在线按钮生成器网站,大家可以直接在网站生成后复制代码到自己的网站上使用即可。

bestcssbuttongenerator.com

https://cssbuttoncreator.com

https://cssbuttongenerator.com

赞(0)
转载请保留:云门网 » 纯代码为wordpress网站侧边栏增加好看的按钮

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址