Sizes

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

Let's start by playing with the sizes of the button.

If you change the width or height of a button, it might cause the text to not be in the middle it's a better practice to play with the padding.

Challenge

Easy

Tasks:

Set the font size of the button text to anything you like, but different than the default size (14px)
Set the vertical padding to 8px and the horizontal padding to 16px
Set margin of your choose

Use the styles.css to select and style your button

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

Sizes