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

Imágen de perfil
Val: 571
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

Actualizado el 13 de Octubre del 2016 por Scriptshow (141 códigos) (Publicado el 8 de Octubre del 2016)
18.100 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
18.101 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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3697