如何在IOS Safari中模拟CSS中的活动按钮？

Question

如何在IOS上设置按钮的样式，使其看起来像默认活动状态？

我将使用touchstart，但希望按钮看起来像正在按下的常规按钮。

HTML：

<button class="active"> I am pressed </button>

CSS：

button.active{
          ??? 
}

图片： （抱歉，它们的裁剪尺寸不完全相同）

编辑：我的最新尝试是：

    button.active
    {
        border-radius: 12px;
        border: 1px solid black;
        background-color: #888;
        box-shadow: 0 0 2px 2px #888;
    }

它非常接近，但边界缩小了。

Answer 1

你可以这样做，使用border伪元素假装第二个:before

.active{
    background:#e2e2e2;
    font-weight:bold;
    width:92px;
    padding:.5em;
    border:3px solid #e2e2e2;
    border-radius:15px;
    position:relative;
    z-index:10;
}

.active:before{
    content:""; 
    display:block; 
    position:absolute;
    z-index:-1; 
    top:1px;
    left:1px;
    right:1px;
    bottom:1px;
    border:1px solid #000;
    border-radius:15px;
}

示例：http://jsfiddle.net/E3jXr/