Menu
I have a button with a box-shadow that makes it look like it's floating, and I would like to make a pressing effect when I click on it:
Code(CSS):
#startBtn { font-family: OpenSans; color: #FFFFFF; background-color: #00FF7C; border: 1px solid #00FF7C; border-radius: 5px; box-shadow: 0px 5px 0px #00823F; } Code(HTML):
<input type="button" id="startBtn" value="Let's begin"> Screenshot:
934
We can use CSS transform property to add a pressed effect on the button when it is active. CSS transform property allows us to scale, rotate, move and skew an element.
For example, buttons now display a ripple effect when they are touched - this is the default touch feedback animation in Android 5.0. Ripple animation is implemented by the new RippleDrawable class. The ripple effect can be configured to end at the bounds of the view or extend beyond the bounds of the view.
Use :active pseudo class and change the box-shadow vertical offset value. Adjust the top value for the activated element with respect to the relatively positioned input with absolute parent.
.button { position: absolute; } #startBtn { font-family: OpenSans; color: #FFFFFF; background-color: #00FF7C; border: 1px solid #00FF7C; border-radius: 5px; box-shadow: 0px 5px 0px #00823F; position: relative; top: 0px; transition: all ease 0.3s; } #startBtn:active { box-shadow: 0 3px 0 #00823F; top: 3px; }<div class="button"> <input type="button" id="startBtn" value="Let's begin"> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
