Shadows

Lesson 6 of 8 in Coddy's CSS Project - Fancy Button course.

It's a common practice to add shadow effects to button in order to give it an elevated and clickable feeling.

To add shadow in CSS we use box-shadow property,

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

Challenge

Easy

Add shadows to your button!

Tip: it's a good practice to use rgba(0, 0, 0, 0.25) color as the shadow color (you can play with the opacity - 0.25)

Try it yourself

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

All lessons in CSS Project - Fancy Button

1Introduction

Introduction HTML part

2The CSS Project

Shadows