How to Hide Button in CSS?

There are two ways to hide a button in CSS:

Let’s have a look at both approaches.

Hide Button using the display Property

The display property controls how an element should be displayed on the web page. Each element on the web page has a default value of the display property.

So, if you want to hide a button completely from the web page, you have to overwrite its default value by display: none;. This will completely remove the button from the HTML document.

It means that the button will no longer take up any space on the webpage.

Here is a live example:


   display: none;

Hide Button using the visibility Property

The visibility property controls whether an element should be visible on a webpage or not.

The default value of the visibility property for each element on the web page is visible. However, if you want to hide the element you can simply set its visibility to hidden.

But remember that the visibility: hidden; only makes the element invisible, it is not completely removed from the HTML document. It means that the element will still take up its original space on the web page.

See this example:


   visibility: hidden;


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts