Menu
How do I style a button, with a shadow, so that it looks like it is pressed in?
I tried using box-shadow: ... ;. But this didn't have any affect.
549
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.
Complete HTML/CSS Course 2022Use the <button> tag in HTML to add a push button. The HTML <button> tag is used for creating a button within HTML form. You can also use <input> tag to create similar buttons. Specifies that the button should have input focus when the page loads.
All style elements in your HTML button tag should be placed within quotation marks. Type background-color: in the quotation marks after "style=". This element is used to change the background color of the button. Type a color name or hexadecimal code after "background-color:".
By creatively styling the :active or :focus pseudo classes using a box-shadow: inset ...;
Using the :active pseudo class:
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:active {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
outline: none;
}<button>
Click me
</button>Using the :focus pseudo class:
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:focus {
background: #e5e5e5;
outline: none;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}<button>
Click me
</button>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
