August 30, 2022

How to Change Background Color of Button in HTML

In this tutorial, you will learn how to change background color of button in HTML. The button element is used to create a clickable button on a webpage. To create a button, we make use of the button element. We can have content like text or images within the button element.

Buttons convey a specific call to action like submit, pay, read more, click me, etc. Buttons tell the users “if you will click me, something will happen.” The button element is an inline-block element.

To change the background color of a button in HTML, we will use the style attribute and background-color property. Please have a look over the code example and the steps given below.

HTML

We have 2 elements in the HTML file (div and button). The div element is just a wrapper for the rest of the elements.
Within the div element, we have a style attribute containing text-align property. This is required to horizontally center align the button element.
Within the button element, we have a style attribute containing various CSS properties.
The innerText for the button element is "My Button".
The background-color property has the value of green, which will eventually change the background color of the button element to green color.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button</title>

</head>

<body>
    <div style="text-align:center;">
        <button style="background-color: green; color: white; padding: 0.75rem 2rem; font-size: 2rem; ">
            My Button
        </button>
    </div>

</body>

</html>

You May Also Like: