Как смоделировать активную кнопку в CSS для IOS Safari?

Question

Как мне оформить кнопку на IOS, чтобы она выглядела как активное состояние по умолчанию ?

Я буду использовать сенсорный запуск, но хочу, чтобы кнопка выглядела как обычная кнопка, которую нажимают.

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/