Colors

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

Background color and text color are one of the most important things when styling a button!

It's important to note the color contrast for readability, when the background color is dark the text color should be bright.

Some examples of dark colors:

black
blue
red
brown

Some examples of bright colors:

white
yellow
pink

Challenge

Easy

Tasks:

Set the text color of the button to white
Set the background color of the button to dark color, make sure it has enough contrast!

Tip:

You can set linear gradient background color using (you can adjust the colors),

background: linear-gradient(rgb(6, 6, 209), rgb(46, 46, 219));

Or with angle (45 degree for example),

background: linear-gradient(45deg, rgb(6, 6, 209), rgb(46, 46, 219));

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

Colors