Home  >  Article  >  Web Front-end  >  How to remove border from css button

How to remove border from css button

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-15 10:12:135938browse

In CSS, you can use the border attribute to remove the border from the button. You only need to set the "border: none;" style to the button element. The border attribute is used to set the border style for the element. When the value of border is none, it means to remove the border and define a borderless style.

How to remove border from css button

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Create a new html file, named test.html, to explain how to remove the border of a button (button) in css.

In the test.html file, use the button tag to create a button for testing.

<button>按钮</button>

In the test.html file, add an id attribute to the button button for style setting.

<button id="button">按钮</button>

In the test.html file, write the tag, and the css style of the page will be written in this tag.

In the css tag, set the style of the button through its id, define its background color as blue, and its text color as white. Finally, set the border attribute to none to remove the button's border.

#button{
            background: blue;
            color: #fff;
            border: none;
        }

Open the test.html file in the browser to check the effect.

How to remove border from css button

Recommended learning: css video tutorial

The above is the detailed content of How to remove border from css button. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn