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>