Geek Answers Handbook

How to make the HTML button look pressed when using CSS?

How do I draw a button with a shadow so that it looks as if it is pressed?

I tried to use box-shadow:... ; But this did not affect in any way.

+7
source share
3 answers

Thanks to the creative design of :active or :focus pseudo-classes using box-shadow: inset...;

Using the :active pseudo- :active :

 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- :focus :

 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>
+14
source

I think the best way to make a button look like it's pressed to make it a little darker.

 button{ background-color: #03A9F4; border: none; padding: 15px 25px; text-transform: uppercase; color: white; font-weight: 700; border-radius: 3px; } button:hover, button:focus{ background-color: #0074a9; outline: none; } 
 <button>Button</button>
+5
source

The best way is to click on the button below on the page. Using transformY would be the easiest. However, this can ruin the location of other things on the page. Therefore, I think it’s better to use margin to temporarily lower the button, for example,

 button { vertical-align: top; box-shadow: 2px 1px 2px gray; margin: 4px 10px 4px 10px; } button:active { box-shadow: 0 0 0 white; margin: 6px 10px 2px 10px; } 
 <button>click me</button> <button>click me</button> <button>click me</button>

As in the example, you can remove 2px from the bottom field and add 2px to the top, so you keep the total size of the button.

You need to vertically align if there is more than one button.

0
source

More articles:


All Articles