Button

Part of the Styling with CSS section of Coddy's HTML journey. Lesson 53 of 76.

Challenge

Easy

In this lesson, we will style the submit button to make it visually appealing. You'll apply a background color, adjust the text color and padding, round the corners, and add a box-shadow to the form to make it stand out.

Style the <button> Element. Follow the steps below:

Set the width to 100% so it fills the whole space.
Apply a background-color of your choice.
Change the text color and make the font stand out.
Add padding to improve spacing.
Round the corners.
Apply a box-shadow property to the button to make it stand out from the background.

Try it yourself

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>