Home > Article > Web Front-end > How to set button background color in css
How to set button background color in css
- WBOYOriginal
- 2021-11-25 17:28:449681browse
In CSS, you can use the "background-color" attribute to set the button background color. The function of this attribute is to set the background color of the element. You only need to add "background-color: color value;" to the button element. Just style it.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to set the button background color in css
In css, you can use the background-color attribute to set the background color of the button, background-color Property is used to set the background color of an element.
Let’s take a look at the specific operation through an example. The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
button{
outline: 0;
}
.el-button {
padding: 0 24px;
border: 1px solid #1E9FFF;
font-size: 14px;
color: #1E9FFF;
line-height: 26px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<button type="button" class="el-button"><span>按钮</span></button>
</body>
</html>Output result:
At this time The background color of the button is gray. Now we only need to add the "background-color: color value;" style to the button element to set the background color of the button.
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
button{
outline: 0;
}
.el-button {
padding: 0 24px;
border: 1px solid #1E9FFF;
font-size: 14px;
color: #1E9FFF;
line-height: 26px;
border-radius: 4px;
cursor: pointer;
background-color:#ffffff;
}
</style>
</head>
<body>
<button type="button" class="el-button"><span>按钮</span></button>
</body>
</html>Output result:
The button background color is white at this time.
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set button background color in css. For more information, please follow other related articles on the PHP Chinese website!