如何模擬iOS Safari中的活動按鈕？

我該如何設計IOS上的按鈕，使其看起來像默認活動狀態？如何模擬iOS Safari中的活動按鈕？

我將使用touchstart，但希望按鈕看起來像正在按下的常規按鈕。

HTML：

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

CSS：

button.active{ 
      ??? 
}

圖片： Normal active （對不起，他們是不完全相同的作物大小）

編輯：我最新的嘗試是：

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

這是非常接近，但邊境縮小 enter image description here

來源

2011-11-24 Jake Wolpert

介意分享的圖片對於我們這些不熟悉的人來說，默認的活動狀態是什麼？ – joshnh

你能做到這一點，利用:before僞元素

僞造第二 border

.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/

來源

2011-11-24 05:50:54

如何模擬iOS Safari中的活動按鈕？

回答

相關問題