YouTube 弹出按钮

最新的 YouTube 设计中（最容易在页脚找到）有一种特定风格的按钮，其中按钮的默认状态具有非常细微的斜角，但在 :hover 和 :focus 状态下，按钮会弹出，渴望被点击。

我认为这种设计在 YouTube 页脚的上下文中效果很好。1) 默认状态非常柔和，这意味着这些按钮不会在几乎所有其他内容都抢眼的网站上争夺注意力。2) 您仍然可以获得非常丰富/明显的按下按钮的体验 3) 它们暗示了与页脚中的其他链接不同的功能（按下这些按钮，某些事情会发生，按下链接，将被带到另一个页面）。它们也很好地实现了这一暗示，这些按钮中的每一个都会在下方打开一个设置面板。

以下是它们的重制版本。从一个按钮开始

<button class="button" role="button">
   Button #1
</button>

以及包括所有三种状态的基本样式

.button {
   border: 1px solid #DDD;
   border-radius: 3px;
   text-shadow: 0 1px 1px white;
   -webkit-box-shadow: 0 1px 1px #fff;
   -moz-box-shadow:    0 1px 1px #fff;
   box-shadow:         0 1px 1px #fff;
   font: bold 11px Sans-Serif;
   padding: 6px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #666;
   background: transparent;
   cursor: pointer;
}
.button:hover, .button:focus {
   border-color: #999;
   background: -webkit-linear-gradient(top, white, #E0E0E0);
   background:    -moz-linear-gradient(top, white, #E0E0E0);
   background:     -ms-linear-gradient(top, white, #E0E0E0);
   background:      -o-linear-gradient(top, white, #E0E0E0);
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
   border: 1px solid #AAA;
   border-bottom-color: #CCC;
   border-top-color: #999;
   -webkit-box-shadow: inset 0 1px 2px #aaa;
   -moz-box-shadow:    inset 0 1px 2px #aaa;
   box-shadow:         inset 0 1px 2px #aaa;
   background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
   background:    -moz-linear-gradient(top, #E6E6E6, gainsboro);
   background:     -ms-linear-gradient(top, #E6E6E6, gainsboro);
   background:      -o-linear-gradient(top, #E6E6E6, gainsboro);
}

查看演示   下载文件

特别感谢 Dennis Sa，他向我发送了一个关于一些 哑光按钮 的 JSbin，他正在研究这些按钮，这让我想到 YouTube 按钮并开始着手这一切。

Trevor Gerzen 将过渡应用于它们，如果您喜欢的话。