Agradeceríamos tu ayuda para extender nuestras secciones acerca de las ciencias de la computación.
Solución:
Al diseñar creativamente el :active o :focuspseudo clases usando un box-shadow: inset ...;
Utilizando el :active pseudoclase:
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;
Utilizando el :focus pseudoclase:
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;
La mejor manera es empujar el botón hacia abajo en la página. Utilizando transformY Sería lo más directo. Sin embargo, eso puede estropear el diseño de otras cosas en la página. Así que creo que es mejor usar margen para bajar temporalmente el botón, como,
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;
Como en el ejemplo, puede quitar 2px del margen inferior y agregar 2px al margen superior, por lo tanto conservas el tamaño total del botón.
Necesita alineación vertical en caso de que haya más de un botón.
Creo que la mejor manera de hacer que un botón parezca que está presionado es hacerlo un poco más oscuro.
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;
Reseñas y puntuaciones de la guía
Acuérdate de que tienes la capacidad de parafrasear si chocaste tu incógnita a tiempo.