Кнопка сжимания CSS перемещает все элементы списка

Question

Так что я хочу создать кнопку псевдо-3d css3, которая использует поле тени и поля, поэтому щелчок нажимается так, как будто он нажат.

.button { 
    margin: 0 0 5px 0; 
    box-shadow: 0 5px 0 #000; 
} 

.button:active { 
    margin: 5px 0 0 0; 
    box-shadow: none; 
} 

И это отлично работает, если я пытаюсь использовать этот код в списке таких как:

<ul> 
    <li><a href="#" class="button>Link</a></li> 
    <li><a href="#" class="button>Link</a></li> 
    <li><a href="#" class="button>Link</a></li> 
</ul> 

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

Вот скрипка: http://jsfiddle.net/6tpR8/

Answer 1

Добавить vertical-align:top к классу .button.

http://jsfiddle.net/6tpR8/1/

Для усиления эффекта добавьте transition: all .25s, чтобы сделать его анимированный (не полностью поддерживается, но не повредит в неподдерживаемых браузерах).

http://jsfiddle.net/6tpR8/3/

Answer 2

Вы могли плавать их:

ul li { 
    float: left; 
    display: inline-block; 
    margin-right: 5px; 
} 

http://jsfiddle.net/6tpR8/2/

Answer 3

Просто добавьте дисплей.

Дисплей: встроенный блок;

Если это еще не исправить, вам необходимо указать его ширину. Таким образом, он действительно знает, насколько он большой.

Для IE, возможно, вам потребуется добавить: border: none;

Уведомление: box-shadow отличается практически во всех браузерах