1

Estoy intentando crear un botón en HTML y CSS con un efecto de hover que haga que el botón se agrande ligeramente, cambie de color y tenga un efecto de relieve. Actualmente, mi código CSS solo cambia el color y agranda el botón al hacer hover, pero me gustaría agregar un efecto de relieve adicional.

Aquí está mi código actual:

.btn {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #45a049;
  /* Darker Green */
  transform: scale(1.05);
}
<button class="btn">Mi Botón</button>

¿Cómo puedo agregar un efecto de relieve adicional al hacer hover sobre el botón utilizando CSS? Agradezco cualquier ayuda o sugerencia que puedan ofrecer.

1
  • Hola Belén, ¿qué tipo de efecto de relieve tenes en mente? ¿podrás compartir un ejemplo?
    – Marcos
    Commented el 19 abr. a las 22:48

1 respuesta 1

0

Tal vez quieras ponerle una sombra al pasar el puntero para dar la sensación de que el botón se separa del fondo.
A tu .btn:hover{} le puedes poner un box-shadow: 3px 3px 6px #000000; (cambia los valores a tu gusto).
ejemplo con tu código:

.btn {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn:hover {
  /*Darker Green*/
  background-color: #45a049;
  /*agregamos la sombra*/
  box-shadow: 3px 3px 6px #000000;
  transform: scale(1.05);
}
<button class="btn">mi botón</button>

Los valores que le asignamos a box-shadow significan:
3px hacia la derecha, 3px hacia abajo, 6px de tamaño, y el color.
box-shadow: 3px 3px 6px #000000;
También se le puede agregar otra medida para el desenfoque de la sombra, y va antes del tamaño.
si quieres poner, por ejemplo, unos 10px de difuminado o desenfoque quedaría así:
3px hacia la derecha, 3px hacia abajo, 10px de desenfoque, 6px de tamaño o extensión más el color.
box-shadow: 3px 3px 10px 6px #000000

y si buscas un efecto de sombreado para simular que el botón tiene volumen puedes usar una sombra interior poniendo inset antes de las medidas de la sombra
Si lo agregamos cambiando solo algunos pixeles quedaría así:

.btn {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  /*agregamos sombra interior*/
  box-shadow: inset -2px -2px 6px #000000;
}

.btn:hover {
  /* Darker Green */
  background-color: #45a049;
  transform: scale(1.05);
}
<button class="btn">mi botón</button>

O puedes mezclar y usar ambas sombras.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.