Código de CSS - Botón con efecto sombra

Imágen de perfil
Val: 404
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Botón con efecto sombragráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 13 de Octubre del 2016 por Scriptshow (Publicado el 8 de Octubre del 2016)
9.041 visualizaciones desde el 8 de Octubre del 2016
Utilizar una clase para conseguir un efecto sombra con relieve en objetos, elementos, etc.
Es muy sencillo y no precisa de librerías de terceros. Con una sola clase CSS3 y algo de estilo aplicado a un botón, así de simple.

Requerimientos

Un navegador compatible con HTML5 y CSS3
No precisa librerías, frameworks, etc...

1.0
estrellaestrellaestrellaestrellaestrella(2)

Actualizado el 13 de Octubre del 2016 (Publicado el 8 de Octubre del 2016)gráfica de visualizaciones de la versión: 1.0
9.042 visualizaciones desde el 8 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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)

Fran
17 de Octubre del 2018
estrellaestrellaestrellaestrellaestrella
Buena aportacion!

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!
Responder
Imágen de perfil
28 de Octubre del 2018
estrellaestrellaestrellaestrellaestrella
Saludos,

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.
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3697