如何用 CSS3 制作社交媒体按钮

作者 为： 高机动蜗牛 当前分类： CSS3, 技术教程

CSS3 的确十分惊人。它给了网页设计师创建可灵活方便地重复使用的设计元素的能力，使我们减少对图形图像编辑软件的依赖。这篇教程会告诉你如何利用 CSS3、HTML 及一些免费社交媒体图标打造时尚的社交媒体按钮。

演示 1

演示 2

下载源文件

启示
一天，我偶然发现 Louis Harboe 的个人网站 Graphicpeel，我注意到网站下方关于我们页面的简单精美社交媒体按钮。“还不错！”我想。但我敢打赌，我可以仅凭 CSS3 就做到这一点。

HTML
首先，用简单的 HTML 进行一些基础设置。我们先创建用来包含按钮的 div，设置其 class 值为 inset。然后，用 <ul> 创建一个无序列表，并用 <li> 创建容纳每个按钮的列表项。

在每个 <li> 标签里都添加一个链接标签 <a>。每个链接标签中都插入一个显示社交媒体图标的 <img> 标签，及一个放置按钮文字的 <span> 标签（例如：”LinkedIn”，”facebook” 等等）。社交媒体图标我用的是 Handycons2 和 108 款免费亚光社交媒体图标。

我们可以将 span 元素的 class 值设置为 site。

你的HTML现在看起来应该是如下这样：

<div class="inset">
 <ul>
  <li>
   <a href="mailto:ansarob@gmail.com">
    <img src="images/gmail_16.png" alt="gmail icon" />
    <span class="site">E-Mail</span>
   </a>
  </li>
  <li>
   <a href="http://linkedin.com" title="My LinkedIn Page">
    <img src="images/linkedin_16.png" alt="LinkedIn icon" />
    <span class="site">LinkedIn</span>
   </a>
  </li>
  <li>
   <a href="http://facebook.com" title="My Facebook Page">
    <img src="images/facebook_16.png" alt="Facebook icon" />
    <span class="site">Facebook</span>
   </a>
  </li>
  <li>
   <a href="http://twitter.com" title="My Twitter Page">
    <img src="images/twitter_16.png" alt="Twitter icon" />
    <span class="site">Twitter</span>
   </a>
  </li>
  <li>
   <a href="http://flickr.com" title="My Flickr Page">
    <img src="images/flickr_16.png" alt="Flickr icon" />
    <span class="site">Flickr</span>
   </a>
  </li>
 </ul>
</div>

CSS
大部分代码都会在CSS中。我们首先要搞定基本样式规则，然后逐步建立按钮。

基础 CSS
先给按钮添加一些基本样式。下面的代码只使用 CSS2 标准，以便给那些不支持 CSS3 标准的浏览器一个备选项。

以下代码不言自明。我们只是给列表项添加一个样式，让它们并排分布（使用 display:block 和 float:left）。

.inset {
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  list-style-type: none;
  margin: 10px 0 0 10px;
}

.inset ul { list-style-type: none; display: block; }

.inset li {
  float: left;
  height: 30px;
  margin: 0 8px 7px 0;
}

.inset li a {
  background-color: gray;
  color: #424242;
  float: left;
  font-size: 16px;
  font-weight: bold;
  height: 24px;
  padding-left: 27px;
  padding-top: 6px;
  position: relative;
  text-decoration: none;
  border: 1px solid #bfc1c6;
}

.inset li a:hover {
  border: 1px solid #b4b7bb;
}

.inset li a img {
  height: 16px;
  left: 7px;
  margin-right: 7px;
  position: absolute;
  top: 7px;
  width: 16px;
    border: none;
}

.inset li a span {
  display: block;
  height: 22px;
  padding-right: 7px;
  overflow: hidden;
  /* width: 70px; Uncomment this to add a fixed width */
}

span.site { font-size: 14px; line-height: 20px; }

目前为止都相当无聊。这也在意料之中，毕竟我们还没有试用任何 CSS3。

CSS3 的圆角属性
为了使按钮看上去更时尚，我们用 border-radius 属性添加一些圆角。 记住，针对 Mozilla （比如：针对对 Firefox、SeaMonkey 及 Flock 等浏览器用 -moz- 前缀） 和 WebKit （比如：针对 Safari 及 Chrome 浏览器 使用 -webkit- 前缀） 我们必须使用供应商特定的浏览器扩展。其它浏览器，如 Opera 和 IE9 无需供应商前缀也支持 border-radius 属性。

在 .inset li a 中添加以下样式：

/* Mozilla browsers that use Gecko layout engine */
-moz-border-radius: 5px;
/* Safari and Chrome that use WebKit layout engine */
-webkit-border-radius: 5px;
/* W3C CSS Level 3.0 specifications. For Opera and IE9 */
border-radius: 5px;

CSS3 的渐变属性
用 CSS3 的渐变属性，我们可以做一些很酷的东西，否则就需要在 Photoshop 一类的图像编辑软件中制作 CSS 的背景图片。CSS3 的渐变属性使我们可以对任何 HTML 元素添加渐变颜色。

要给按钮加上渐变我们要在 background 属性里使用渐变语法（即 linear-gradient() 和 gradient()）。

由于 Mozilla 浏览器和 WebKit 浏览器的显示方式不同，所以虽然我们试图做同样的事情，但代码必须针对不同的浏览器布局引擎来写。

注意，对 Mozilla （-moz-）我用百分比，而对 WebKit （-webkit-）我用小数。1% 在 Mozilla 中相当于 0.01 在 WebKit 中，10% 在 Mozilla 中相当于 0.1 在 WebKit 中，等等。

在 .inset li a 中添加以下样式：

/* Mozilla browsers that use Gecko layout engine */
background: -moz-linear-gradient(#a5a7aa, #bec1c5 1%, #d8dbdf 10%, #d8dbdf);
/* Safari and Chrome that use WebKit layout engine */
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #a5a7aa),color-stop(.01, #bec1c5),color-stop(.10, #d8dbdf),color-stop(1, #d8dbdf));

:hover 伪类
让我们继续。当用户的鼠标悬停时，按钮的外观会发生变化。当用户鼠标滑过按钮时通过改变渐变的颜色，我们可以给他一个视觉提示，告诉他这是点击。如果你希望产生更强烈的视觉吸引力，你可能希望通过 CSS3 的变换功能来试验一下。

在 inset li a:hover 中添加以下样式：

background: -moz-linear-gradient(#9c9fa2, #b4b7bb 1%, #cdd0d5 10%, #cdd0d5);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9c9fa2),color-stop(.01, #b4b7bb),color-stop(.10, #cdd0d5),color-stop(1, #cdd0d5));

在下面的图片中，我悬停的电子邮件按钮比其他按钮暗。

备选样式：按钮的 “Outset” 效果
为了验证 CSS3 所提供的灵活性，我们创建一个使用相同的 HTML 结构的不同版本的按钮。

HTML
在这个例子中，我们需要将 div 中的 class 值由 inset 改为 outset-colored。

此外，由于每个按钮的颜色都不相同，我们必须指定唯一的 class 值。我们可以指定 <a> 标签的 class 值。例如：Facebook 是 class=”facebook”。你可能想知道我为什么选择 class 属性而不是 ID 属性，这是因为我想让同一类的多个按钮可以出现在同一页面上。

下面是 HTML

<div class="outset-colored">
  <ul>
    <li>
      <a href="mailto:ansarob@gmail.com" title="My E-Mail" class="email">
        <img src="images/gmail_white.png" alt="gmail icon" />
        <span class="site">E-Mail</span>
      </a>
    </li>
    <li>
      <a href="http://linkedin.com" title="My LinkedIn Page" class="linkedin">
        <img src="images/linkedin_white.png" alt="LinkedIn icon" />
        <span class="site">LinkedIn</span>
      </a>
    </li>
    <li>
      <a href="http://facebook.com" title="My Facebook Page" class="facebook">
        <img src="images/facebook_white.png" alt="Facebook icon" />
        <span class="site">Facebook</span>
      </a>
    </li>
    <li>
      <a href="http://twitter.com" title="My Twitter Page" class="twitter">
        <img src="images/twitter_white.png" alt="Twitter icon" />
        <span class="site">Twitter</span>
      </a>
    </li>
    <li>
      <a href="http://flickr.com" title="My Flickr Page" class="flickr">
        <img src="images/flickr_white.png" alt="Flickr icon" />
        <span class="site">Flickr</span>
      </a>
    </li>
  </ul>
</div>

CSS
CSS 比原来的更长，但那主要是因为每个按钮都有不同颜色的缘故。与在 CSS3 中的使用非常相似。替代结果只是渐变颜色的值不同而已。

下面是备选样式的 CSS

/* COLORED OUTSET BUTTONS */

.outset-colored {
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  list-style-type: none;
  margin: 10px 0 0 10px;
}

.outset-colored ul { list-style-type: none; display: block; }

.outset-colored li {
  float: left;
  height: 30px;
  margin: 0 8px 7px 0;
}

.outset-colored li a {
  color: #424242;
  float: left;
  font-size: 16px;
  font-weight: bold;
  height: 24px;
  padding-left: 27px;
  padding-top: 6px;
  position: relative;
  text-decoration: none;
  border: 1px solid #bfc1c6;
  border-radius: 5px;
  background-color: #D8D9DD;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

/* EMAIL */
.outset-colored li a.email {
  background: -moz-linear-gradient(#ff6666, #cc0000 10%, #c40202);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff6666),color-stop(.10, #cc0000),color-stop(1, #c40202));
  color: #f3f3f3;
  border: 1px solid #c40202;
}

.outset-colored li a:hover.email {
  background: -moz-linear-gradient(#c40202, #cc0000 1%, #e03434 10%, #e03434);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c40202),color-stop(.01, #cc0000),color-stop(.10, #e03434),color-stop(1, #e03434));
}

/* LINKEDIN */
.outset-colored li a.linkedin {
  background: -moz-linear-gradient(#7cd0fb, #38a5dc 10%, #2c83ae);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7cd0fb),color-stop(.10, #38a5dc),color-stop(1, #2c83ae));
  color: #f3f3f3;
  border: 1px solid #2c83ae;
}

.outset-colored li a:hover.linkedin {
  background: -moz-linear-gradient(#2c83ae, #38a5dc 1%, #41b9f6 10%, #41b9f6);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2c83ae),color-stop(.01, #38a5dc),color-stop(.10, #41b9f6),color-stop(1, #41b9f6));
}

/* FACEBOOK */
.outset-colored li a.facebook {
  background: -moz-linear-gradient(#7aa3f7, #4c72c3 10%, #3b5998);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7aa3f7),color-stop(.10, #4c72c3),color-stop(1, #3b5998));
  color: #f3f3f3;
  border: 1px solid #3b5998;
}

.outset-colored li a:hover.facebook {
  background: -moz-linear-gradient(#3b5998, #4c72c3 1%, #5c8aea 10%, #5c8aea);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3b5998),color-stop(.01, #4c72c3),color-stop(.10, #5c8aea),color-stop(1, #5c8aea));
}

/* TWITTER */
.outset-colored li a.twitter {
  background: -moz-linear-gradient(#8ae0fd, #24bce6 10%, #1e9ec1);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #8ae0fd),color-stop(.10, #24bce6),color-stop(1, #1e9ec1));
  color: #f3f3f3;
  border: 1px solid #1e9ec1;
}

.outset-colored li a:hover.twitter {
  background: -moz-linear-gradient(#1e9ec1, #24bce6 1%, #33ccff 10%, #33ccff);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #24bce6),color-stop(.01, #33ccff),color-stop(.10, #33ccff),color-stop(1, #33ccff));
}

/* FLICKR */
.outset-colored li a.flickr {
  background: -moz-linear-gradient(#fc75ba, #e10374 10%, #c10263);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fc75ba),color-stop(.10, #e10374),color-stop(1, #c10263));
  color: #f3f3f3;
  border: 1px solid #c10263;
}

.outset-colored li a:hover.flickr {
  background: -moz-linear-gradient(#c10263, #e10374 1%, #ff0283 10%, #ff0283);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c10263),color-stop(.01, #e10374),color-stop(.10, #ff0283),color-stop(1, #ff0283));
}

.outset-colored li a img {
  height: 16px;
  left: 7px;
  margin-right: 7px;
  position: absolute;
  top: 7px;
  width: 16px;
   border: none;
}

.outset-colored li a span {
  display: block;
  height: 22px;
  padding-right: 7px;
  overflow: hidden;
  /*width: 70px; Add a width here if you want all the buttons to be the same size.*/
}

span.site { font-size: 14px; line-height: 20px; }

高机动蜗牛，80后挨踢民工，吉林壹推站长。曾于多家科技公司担任网络部门负责人，现供职于吉林省某投资管理集团有限公司。擅长网站设计，Discuz主题开发及论坛架设，WordPress主题开发及主题汉化，SEO搜索引擎优化，SMO社交媒体优化。你可以在新浪微博@高机动蜗牛或加QQ:908315256联系他。