使用 CSS 创建极简圆形 3D 按钮

在本教程中，我们将制作以下内容

基本 HTML

我们将使用 <nav> 标签内的简单无序列表¹ 来创建我们的按钮。

<nav>
      
  <ul class="nav">
       
    <li><a href="#" class="icon-home"></a></li>

    <li><a href="#" class="icon-cog"></a></li>

    <li><a href="#" class="icon-cw"></a></li>

    <li><a href="#" class="icon-location"></a></li>

  </ul>

</nav>

一些资源

• 按钮中的这些图标来自 Fontello 图标字体和 Web 应用程序。
• 纹理背景来自 Subtle Patterns。

图标字体的 CSS

有几种方法可以做到这一点，但我们将使用这种方法

@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot');
  src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'),
       url('../fonts/fontello.woff') format('woff'),
       url('../fonts/fontello.ttf') format('truetype'),
       url('../fonts/fontello.svg#fontello') format('svg');
  font-weight: normal; font-style: normal;
}

[class*=" icon-"] {
  font-family: 'fontello';
  font-style: normal;
  font-size: 3em;
  speak: none;
}

.icon-home:after     { content: "\2302"; } 
.icon-cog:after      { content: "\2699"; } 
.icon-cw:after       { content: "\27f3"; } 
.icon-location:after { content: "\e724"; }

按钮的 CSS

通过将列表项设置为 inline-block，按钮将水平排列。 我们将使用一点负边距将它们彼此紧挨着（或者参见 其他技术）。

.nav {
  list-style: none;
  text-align: center;
}

.nav li {
  position: relative;
  display: inline-block;
  margin-right: -4px;
}

按钮的美丽的三维效果来自于微妙的渐变和一对 box-shadow（一个普通阴影，一个内阴影）带来的斜面和浮雕效果。 按钮的宽度和高度相同，形成一个正方形，然后通过 border-radius 变为圆形。 line-height 与高度匹配，text-align 设置为居中，因此图标将水平和垂直居中。

.nav a {
  display: block;
  background-color: #f7f7f7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
  background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); 
  color: #a7a7a7;
  margin: 36px;
  width: 144px;
  height: 144px;
  position: relative;
  text-align: center;
  line-height: 144px;
  border-radius: 50%;
  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}

我们可以通过在 :hover 状态下略微扁平化按钮来创建按下效果。 您可能希望将此保存为 :active 状态，并在 :hover 状态下执行其他操作，但我们将留给您决定。

.nav a:hover{
  text-decoration: none;
  color: #555;
  background: #f5f5f5;
}

此时，我们的按钮应该看起来像这样

还不错，但我们还有很长的路要走。

现在到了有趣的部分，我们将使用伪元素为我们提供一些额外的元素来创建其他效果。 为了创建您在每个按钮之间看到的水平“凹槽”，我们将向列表项添加伪选择器 :before。 使用负 z-index，我们可以将其保持在所有内容下方。 双 border 使其具有内陷效果。 我们之前在列表项上使用的负边距使此凹槽看起来是连续的。 我们利用绝对定位将线条居中。

.nav li:before {
  content: "";
  display: block;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #fff;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: -1;
}

为了获得额外的三维效果，我们将在按钮所在的每个锚点周围创建一个“井”。 我们再次可以通过使用伪元素在没有额外 HTML 的情况下创建它。

.nav a:before {
  content: "";
  display: block;
  background: #fff;
  border-top: 2px solid #ddd;
  position: absolute;
  top: -18px;
  left: -18px;
  bottom: -18px;
  right: -18px;
  z-index: -1;
  border-radius: 50%;
  box-shadow: inset 0px 8px 48px #ddd;
}

井的大小（略大于按钮本身）来自于将其绝对定位在按钮后面，并通过使用负定位值（top/bottom/left/right）将其拉伸。 这次的三维效果来自于顶部 border 和内阴影 box-shadow 创建的内部阴影。

完成了！

是不是很简单？

浏览器支持

这些按钮使用了大量的 CSS3 和一些伪元素（CSS 2.1）。 虽然没有太过前沿的技术。 近几年 Safari、Chrome、Opera 或 Firefox 的任何版本都不会有任何问题。 IE 8 不支持 CSS3，因此它会回退到以下效果

IE 7 类似，只是没有“凹槽”线条，因为它不支持伪元素。 也没什么大不了的。

¹ 无序列表 可能并不适合导航。 我们在这里仍然使用它们，因为我们需要额外的元素。