[wd_asp elements=’search’ ratio=’100%’ id=1]

Pressed button effect

2nd April 2015

CSS

Css - Codehaven

A nice simple effect

If you just add this to your button : – transition: all 0.1s;
-webkit-transition: all 0.1s;

and this to the css, remembering to change your selectors name of course! : –
.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 …


.btn
{
transition: all 0.1s;
-webkit-transition: all 0.1s;
position: relative;

}

.btn:active
{
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);

}