html close button

HTML close button: How to add an elegant close button to a web page

In web design, the close button is a common element that can provide convenience to visitors and help them complete their browsing Easily exit the page or application later. In this article, we’ll show you how to create an elegant close button using HTML and CSS, and how to associate it with a web page’s close event via JavaScript.

Step One: Create HTML Element

The first step in creating an HTML close button is to create an HTML element. We'll use a button element and add custom styles to make it look like a close button. For example, we can use basic HTML code:

<button class="close-btn">关闭</button>

This will create a simple button where "Close" is the text on the button.

Step 2: Add CSS styles

Next, we will add custom CSS styles to beautify the button. We can use the CSS box-shadow property to give it a three-dimensional effect, and the border-radius property to create rounded corners. We can use the following CSS code:

.close-btn {
  background-color: #444;
  border: none;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
}

This will create a close button with 3 pixel rounded corners and a shadow effect.

Step Three: Add JavaScript Event

Finally, we need to associate the close button with the page's close event. We can use JavaScript to perform this task. When the user clicks the close button, we can use the window.close() function to close the currently open window or tab. For example:

document.querySelector('.close-btn').addEventListener('click', function() {
  window.close();
});

Just add this code to the JavaScript file of the web page. Now, when the user clicks the close button, the web page will automatically close.

Summary

In this article, we created an elegant close button using HTML, CSS, and JavaScript. This button works on a variety of different web pages and applications to help visitors exit the page easily. As web design advances, close buttons will become more and more common, and designers can use different styles and techniques to create their own great close buttons.

The above is the detailed content of html close button. For more information, please follow other related articles on the PHP Chinese website!