Sombras

Lección 6 de 8 del curso Proyecto de CSS: Botón elegante de Coddy.

Es una práctica común añadir efectos de sombra a un botón para darle una sensación de elevación y de que se puede hacer clic en él.

Para añadir una sombra en CSS utilizamos la propiedad box-shadow,

#with-shadow {
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25)
}

Desafío

Fácil

¡Añade sombras a tu botón!

Consejo: es una buena práctica usar el color rgba(0, 0, 0, 0.25) como el color de la sombra (puedes jugar con la opacidad - 0.25)

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
    </body>
</html>

Todas las lecciones de Proyecto de CSS: Botón elegante

1Introducción

Introducción Parte de HTML

2El proyecto CSS

Sombras