专注优质Wordpress企业网站搭建与优化

柳影花阴：图标修饰的精美CSS按钮

图标修饰的精美CSS按钮

我喜欢在我的网站中加入一些简单清爽，但又颇具吸引力的设计元素。在本文中我们将学习如何利用少量的HTML代码，和简单的CSS样式，结合一些小图标设计清爽美观的按钮。下面是部分的设计成果：

图标修饰的精美CSS按钮

如果你觉得它们对你的网站或CSS学习有所用处，可以点击下面的链接下载源代码：

1.HTML代码：

示例中的按钮都具有类似的HTML代码结构：一个链接标签a，里面包含一个span标签，如下：

这种代码结构你可以重复利用在所有的按钮上：

汇聚博客资源,点亮博客价值 - 西米CC

链接标签a在这里作为按钮的容器：

图标修饰的精美CSS按钮 - 西米CC

而span标签则用于放置图标，以背景图片的形式：

图标修饰的精美CSS按钮

按照这个思路，每个按钮的大部分代码结构都很相似：

2.CSS代码:

下面的CSS代码主要定义了按钮容器的外观样式，包括背景、字体、宽高等：

接下来是对各个按钮单独的样式定义，区别主要在于背景图标的差异：

在每个类样式的定义中，你可以选用自己喜欢的图标，在本例中我所用的素材图标都来自于Deviantart，非常简洁美观的Proxal Icon Set V2，你可以到这个网站去浏览更多优秀的图标设计。