Definition:
CSS button colors can be changed by using background-color properties. See an example below of using background-color.
Syntax:
.button
{
background-color: green; /* Here button background color is green*/
} Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: green;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
margin-left: 30px;
}
.btnblue {
background-color: blue;
}
</style>
</head>
<body>
<h2>Button Colors</h2>
<button class="button">Green</button>
<button class="button btnblue">Blue</button>
</body>
</html>
Output:
In the above example, both button background-color properties are styled together as green, but the second button background-color is replaced by the second background-color and the first button background-color remains the same.
Therefore, the first background-color property is green and the second button background-color is blue.
See the above CSS style sheets for a better understanding. You can try changing into different background colors you like. Click the below button to try it yourself.
Donate to support writers.
You may interest on the following topics:
- CSS Button On Image
- CSS Button Animation
- CSS Button Groups
- CSS Disabled Button
- CSS Button Shadows
- CSS Hoverable Buttons
- CSS Button Borders
- CSS Button Shape
- CSS Button Width
- CSS Button Font Sizes
- CSS Button Colors
- CSS Buttons (All Properties)