A nice simple effect
If you just add this to your button : –
1 2 3 4 |
transition: all 0.1s; -webkit-transition: all 0.1s; |
and this to the css, remembering to change your selectors name of course! : –
1 2 3 4 5 6 7 8 |
.action-button:active { transform: translate(0px,5px); -webkit-transform: translate(0px,5px); border-bottom: 1px solid; } |
It will minimally work, depending on your button style.
For bootstrap pushed button effect in one go …
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.btn { transition: all 0.1s; -webkit-transition: all 0.1s; position: relative; } .btn:active { transform: translate(0px,5px); -webkit-transform: translate(0px,5px); } |