Home > Web Front-end > CSS Tutorial > How to hide button in css

How to hide button in css

王林
Release: 2023-01-06 11:13:37
Original
5999 people have browsed it

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.

How to hide button in css

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template