Teoría
Teoría

Sombra interior

Si usas la palabra clave inset en box-shadow, la sombra se dibuja dentro del elemento.

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

Conviene colocar inset al principio o al final del valor de la propiedad.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sombra interior</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn btn1" type="button">Botón 1</button> <button class="btn btn2" type="button">Botón 2</button> <button class="btn btn3" type="button">Botón 3</button> </body> </html>

CSS

.btn1 { box-shadow: 5px 5px 0 0 #34495e; } .btn2 { box-shadow: 0 0 5px 0 #34495e; } .btn3 { box-shadow: 0 0 5px 3px #34495e; } body { background-image: url("bg.jpg"); font-size: 18px; font-family: "Tahoma", sans-serif; } .btn { display: block; margin: 50px 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

Convierte la sombra del primer botón en una sombra interior.
Haz lo mismo con el segundo botón.
Y también con el tercero.