Iniciar sesión
Crear cuenta
Crear cuentaCrear cuenta(2)<!DOCTYPE html>
<html>
<head>
<style>
.button {
margin: 0px;border: none;color: #444444;
cursor: pointer;font-size: 16px;
padding: 15px 32px;text-align: center;
text-decoration: none;
display: inline-block;
background-color: #FAFAFA;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}.button:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.16);
}</style>
</head>
<body>
<h2>Efecto box-shadow</h2>
<p>Aplicando la propiedad box-shadow a un objeto conseguimos el efecto sombra-relieve:</p>
<button class="button">Botón con efecto</button><button class="button">Botón con efecto</button>
</body>
</html>
Comentarios sobre la versión: 1.0 (2)
Quería preguntarte una duda.
Al ponerle un margin left en hover para que el efecto sea más marcado no solo mueve la caja en la que estoy aplicando el efecto, sino que las inferiores tambien se mueven.
¿Sabrías a que se debe? Un saludo y gracias!
al variar los márgenes, es lógico que se mueva el elemento. Puedes declarar el mismo margen en la Clase y también en el Hover para evitar desplazamientos. Por otra parte, la posición de la caja, y sus atributos: relative, absolute, fixed, etc. también afectan. Estructura lo mejor posible todo en conjunto.
Espero sea útil.
Muchas gracias por tu interés.