нажатии кнопки эффект для Bootstrap 3 кнопки

Question

У меня есть создать bootply демо в здесь http://bootply.com/110656

Я хочу, чтобы создать эффект нажатия кнопки, как учебник по http://tympanus.net/codrops/2013/06/13/creative-button-styles/. Но каким-то образом нажатый эффект не работает. перемещается только тень, а не кнопка.

Я играл с top и box-shadow много раз, но все еще не работает, что мне здесь не хватает?

Answer 1

Пожалуйста, имейте в виду, что, top, left, right, bottom свойства CSS работает с absolute или relative или fixed расположенных элементов. Нажатое или нажатое событие называется :active псевдо-css-классом. В вашем случае вы должны использовать следующие стили.

.btn-custom { 
    border-bottom: 5px solid #285e8e; 
    position: relative; 
} 

.btn-custom:hover { 
    top: 2.5px; 
    border-bottom-width: 2.5px; 
} 

.btn-custom:active { 
    top: 5px; 
    border-bottom: 0; 
} 

Пожалуйста, проверьте этот bootply пример: http://bootply.com/110673.