web-dev-qa-db-fra.com

Comment faire en sorte que le bouton HTML semble pressé à l'aide de CSS?

Comment puis-je styliser un bouton, avec une ombre, pour qu'il ressemble à ce qu'il est enfoncé?

J'ai essayé d'utiliser box-shadow: ... ;. Mais cela n'a eu aucun effet.

htmlcsstoggle
9
philr

En créant de manière créative le :active ou :focus pseudo-classes utilisant un box-shadow: inset ...;

En utilisant le :active pseudo-classe:

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>

En utilisant le :focus pseudo-classe:

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>
15
Red

Je pense que la meilleure façon de faire un bouton semble avoir été pressé, c'est de le rendre un peu plus sombre.

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
therealbischero

La meilleure façon est de déplacer le bouton plus bas sur la page. L'utilisation de transformY serait la plus simple. Cependant, cela peut perturber la mise en page d'autres éléments de la page. Je pense donc qu'il vaut mieux utiliser margin pour abaisser temporairement le bouton, comme,

button {
    background-color: white;
    padding: 10px;
    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>
<br>
<button>click me</button>
<button>click me</button>

Comme dans l'exemple, vous pouvez retirer 2 pixels de la marge inférieure et ajouter 2 pixels à la marge supérieure, vous conservez donc la taille totale du bouton.

Vous devez aligner verticalement s'il y a plus d'un bouton.

1
John Henckel