Change the Button Color Using Inline Styling
In this approach, we are using inline styling directly within the HTML tags to change the button colors. The style attribute is used to specify individual styles like background color and text color for each button.
Syntax:
<HTMLElement style="CSS_properties">
Text Content
</HTMLElement>
Example: The below example uses inline styling to change the button color in HTML.
HTML
<!DOCTYPE html><head> <title>Example 1</title></head><body> <h1 style="color: green;"> w3wiki </h1> <h3> Using Inline Styling </h3> <button style= "background-color: blue; color: white;" onclick="colorFn(this)"> Click me </button> <button style= "background-color: red; color: white;" onclick="colorFn(this)"> Click me </button> <button style= "background-color: green; color: white;" onclick="colorFn(this)"> Click me </button> <script> function colorFn(element) { const color = randomFn(); element.style.backgroundColor = color; } function randomFn() { const l = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += l[Math.floor(Math.random() * 16)]; } return color; } </script></body></html> |
Output:
How to Change the Button Color in HTML ?
Styling of elements enhances the visual appearance and improves the overall user interface. We can change the button color in HTML using different approaches as listed below.
Table of Content
- Using Inline Styling
- Using Internal Styling