Css button pressing effect
75,363
Solution 1
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>
Solution 2
IF the buttoms have a fixed height (as it looks) I would wrap the buttom into a div with that height and set the button to position absolute to create the right effect (moving it down) with:
#startBtn:active {
box-shadow: 0 1px 0 #00823F;
bottom:-4px;
}
Author by
Jojo01
Updated on April 24, 2020Comments
-
Jojo01 about 4 years
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: