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:
Example:
button.hide{
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:
Example:
button.hide{
visibility: hidden;
}
