How to set button background color in css-CSS Tutorial-php.cn

How to set button background color in css

WBOY

Release： 2021-11-25 17:28:44

Original

9707 people have browsed it

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.

How to set button background color in css

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>

Copy after login

Output result:

How to set button background color in css

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>

Copy after login

Output result:

How to set button background color in css

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!