CSS properties, we can style the buttons. Buttons help us to create user interaction and event processing. They are one of the widely used elements of web pages.During the form submission, to view or to get some information, we generally use buttons.
There are multiple properties available that are used to style the button element. Let’s discuss them one by one.
- Background-color= this property is used for setting the background color of the button element.
Syntax
element {
// background-color style
} - border= It is used to set the border of the button. It is the shorthand property for border-width, border-color, and border-style.
Syntax
element {
// border style
} - border-radius= It is used to make the rounded corners of the button. It sets the border radius of the button.
syntax
element {
// border-radius property
} - padding =It is used to set the button padding.
syntax
- element {
- // padding style
- }
example
<!DOCTYPE html>
<html>
<head>
<title>
button background Color
</title>
<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
}
.b2 {
background-color: blue;
}
.b3 {
background-color: violet;
}
</style>
</head>
<body>
<h1>The background-color property.</h1>
<button class="b1">Red color button</button>
<button class="b2">Blue color button</button>
<button class="b3">Violet color button</button>
</body>
</html> output
