HTML hidden button: Use CSS to hide and show buttons

In web development, hiding buttons is a very common requirement. Sometimes we need to hide some action items and display them when needed instead of occupying the page space all the time. In this case, we can use CSS to hide and show the button.

The following is a way to achieve it:

1. Add the "hide button" tag in HTML

隐藏按钮

2. Use CSS to style the button and attribute

.hide-btn {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  cursor: pointer;
}

The above CSS code sets the button's position outside the page, and also sets the width, height, transparency, and mouse pointer style. These properties make the button invisible on the page, but still clickable.

3. Create a controller that displays a button

显示按钮

This button is clickable by the user. When the user clicks it, it will trigger the display of the "hidden button" label.

4. Set the style and behavior of the controller

.show-btn {
  cursor: pointer;
}

var hideBtn = document.querySelector('.hide-btn');
var showBtn = document.querySelector('.show-btn');

showBtn.addEventListener('click', function() {
  hideBtn.style.position = 'static';
});

Here we add a click event to the controller button. When the user clicks it, the "Hide Button" label will be added. Set its position to static so it will appear on the page.

5. Add animation effects (optional)

If you want to make the appearance and disappearance of this button smoother, we can use CSS animation effects. For example, when the user clicks the "Show Button", let the "Hide Button" label appear in a fade-in manner:

.hide-btn {
  ...
  transition: opacity 1s;
}

.hide-btn.visible {
  opacity: 1;
}

showBtn.addEventListener('click', function() {
  hideBtn.classList.add('visible');
});

Here we use the CSS transition attribute to set the opacity value from one opacity value to another. Transition effects. At the same time, we also created a .visible class. When the user clicks the "Show Button", we add it to the "Hide Button" label, which will trigger the transition effect in CSS.

Summary

It is very simple to use CSS to hide and show buttons. We just need to set the position of the "hidden button" label outside the page, and then use a controller to change its position, or use CSS animation effects to make it appear and disappear more smoothly. This method is not only convenient and practical, but also has no impact on the performance and loading speed of the page.

The above is the detailed content of HTML hidden button: Use CSS to hide and show buttons. For more information, please follow other related articles on the PHP Chinese website!