采用html+css手把手创建简单的WordPress文章按钮,给文章添加亮点
前言
前些天写了一个用图片替代按钮的方法,其实也就是一个搞笑的方法,现在正式的说说用HTML+CSS方法创建一个漂亮的按钮
HTML方面
首先我们要知道,其实在HTML标准里面已经有了关于网页按钮的标签了分别是input
和button
,不过button标签更为优秀,所以,本文章主要说的就是button标签。
首先看一下HTML默认的button标签的使用
[button onclick="window.open('https://gitcafe.net')">乐趣公园</button]
将代码中的[]符号换成<>
实际效果如下
效果怎么样?肯定是不行是吧?肯定的,如果只是这样,这篇文章也没什么看点了。
这是最原始的样式,我们还需要给这个按钮添加一些样式
[button style="width:auto;color:#fff;background-color:#00a67c;" onclick="window.open('https://gitcafe.net')">乐趣公园</button]
将代码中的[]符号换成<>
看下添加样式之后的效果
这个是为按钮添加宽度,文字颜色还有背景颜色,都是比较简单的样式。
CSS方面
这个按钮还是太简单了?不好看?没关系,接着来,添加复杂样式,我们首先需要给button按钮添加一个class,我起名为mybutton,这个名字是随意添加的
[button class="mybutton" onclick="window.open('https://gitcafe.net')">乐趣公园</button]
将代码中的[]符号换成<>
我们首先知道如何给HTML标签添加样式,首先我们需要添加样式的格式
最终按钮效果
-- 完 --
这里是头像
真棒
@小陈 还没写到底 (^_^)
挺好看的。。。
@微饭 爪机客户端写的,还有后半段没粗来(≧▽≦)
标签云的背景是如何实现的呢?还有就是字体加亮
@微风里的红叶 其实就是在page/tags.php里面添加一个背景而已