css - 如何使用 CSS 制作 3D 按钮？

Question

我有一个如下所示的 CSS 按钮:

由这个 CSS 代码构成:

.Button{
 color: #333;
border: 1px solid orange;
border-bottom: 5px solid orange;
background-color: #fff;
font-size: 12px;
margin: 5px;
padding: 1px 7px 1px 7px;
display: inline-block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
top: 0px;
}

.Button:hover{
cursor: hand; 
cursor: pointer;
}

.Button:active{
border-bottom: 3px solid #999;
top: 3px;
}

这就是我试图让它看起来像的(但我不知道该怎么做):

请原谅我的绘画技巧。我只想扩展左侧的橙色边框，使其看起来像 3D。谢谢!

Answer 1

这很接近，但并不完美。

使用 box-shadow 和 border :

.Button {
    color: #333;
    box-shadow: -3px 3px orange, -2px 2px orange, -1px 1px orange;
    border: 1px solid orange;
}

http://jsfiddle.net/grYTZ/3/