Teoría
Teoría

Desplazamiento vertical de la sombra

Veamos de nuevo la sintaxis:

box-shadow:
[inset]  — interior
5px      — desplazamiento en x
10px    <— desplazamiento en y
[2px]    — desenfoque
[3px]    — expansión
[red];   — color

El segundo valor numérico indica el desplazamiento vertical. Un valor positivo mueve la sombra hacia abajo; uno negativo, hacia arriba.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Desplazamiento vertical de la sombra</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn" type="button">Botón</button> </body> </html>

CSS

.btn { box-shadow: 5px 0 0 0 #34495e; } body { background-image: url("bg.jpg"); font-size: 18px; font-family: "Tahoma", sans-serif; } .btn { display: block; margin: 100px auto; padding: 15px 20px; width: 150px; border: none; box-sizing: content-box; background-color: #3498db; color: white; text-align: center; text-transform: uppercase; font: inherit; }

ObjetivosRealizado

Mueve la sombra inicial 10px hacia abajo.
Luego, muévela 10px hacia arriba. Usa un valor negativo.