Home > Article > Web Front-end > How to hide button in css
How to hide button in css
- 王林Original
- 2021-05-17 15:52:575967browse
The way to hide a button in css is to add the display attribute to the button, such as [style="display:none;"]. The display attribute specifies the type of box that the element should generate, and none means that the element is not displayed.
The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.
If we want to achieve the effect of hiding the button, we can use the display attribute. Let’s introduce this attribute in detail below.
The display attribute specifies the type of box the element should generate.
Attribute value:
none This element will not be displayed.
block This element will be displayed as a block-level element, with line breaks before and after this element.
#inline Default. This element will be displayed as an inline element with no line breaks before or after the element.
Specific code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<!--display:block:显示按钮-->
<button id="displayBtn" style="display:block">显示按钮</button>
<!--display:block:隐藏按钮-->
<button id="hiddenBtn" style="display:none;">隐藏按钮</button>
</div>
</body>
</html>Related video sharing: css video tutorial
The above is the detailed content of How to hide button in css. For more information, please follow other related articles on the PHP Chinese website!