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

Pos: 3

Val: 571

Ha mantenido su posición en CSS (en relación al último mes)

Botón con efecto sombra

CSS

(2)

Actualizado el 13 de Octubre del 2016 por Scriptshow (141 códigos) (Publicado el 8 de Octubre del 2016)

16.091 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
(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

16.092 visualizaciones desde el 8 de Octubre del 2016

<!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

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

ScriptShow

28 de Octubre del 2018

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

http://lwp-l.com/s3697

Evitar la selección de texto con una Class CSS

Simple Reveal Background Scroll

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

Requerimientos

1.0(2)

Comentarios sobre la versión: 1.0 (2)

Comentar la versión: 1.0

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

1.0
(2)