close button html

The close button in HTML is used to close a window or pop-up box in a web page or application. The close button is generally an icon or text, and the user can close the current window or pop-up box by clicking the button. This article will introduce the close button in HTML and how to implement different types of close buttons.

1. Basic usage of the close button

In HTML, the most basic close button is a button element. The specific implementation is as follows:

<button onclick="window.close()">关闭</button>

Implementation of this close button The method is very simple. When the user clicks the button, the window.close() function of JavaScript will be called to close the current window.

2. Icon style of close button

In addition to text buttons, we can also use pictures or icons to implement close buttons to add visual effects. Commonly used closing icons include X, ×, etc., which can be implemented using font icons or custom pictures. The following are two implementation methods:

1. Use font icons

Font icons can specify colors, sizes and other styles through CSS, which is more flexible and convenient. Moreover, the font icons can be adapted to screens with different resolutions, making them clearer and smoother. The following is an example of a close button using the Font Awesome font icon:

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<button onclick="window.close()">
  <i class="fas fa-times"></i>
</button>

Here we use the link element to import the Font Awesome CSS file, and then nest an i## in the button # element, set its class attribute to fas fa-times, which means using the times icon. When the user clicks the close button, JavaScript's window.close() is executed.

2. Use a custom picture

To use a custom picture to implement the close button, you need to prepare a picture first. Displaying this picture on the web page will not be too time-consuming. The following example uses a close icon in PNG format:

<button onclick="window.close()">
  <img src="close.png" alt="关闭">
</button>

Here we nest an

img element in the button and use the src attribute to specify the URL of the image, ## The #alt attribute is the description of the image. When the user clicks the button, JavaScript's window.close() is executed. 3. Style design of the close button

Good-looking buttons can often improve user experience. Now let’s style the close button.

1. Wireframe buttons

Wireframe buttons are often used in lightweight or flat style designs. The border, color, font, etc. of the button can be set through CSS styles.

The following is an implementation of a close button using wireframe style:

<button class="close-button" onclick="window.close()">关闭</button>

We added a class name named

close-button

to style the button. The following is the corresponding CSS code: <pre class='brush:css;toolbar:false;'>.close-button { border: 1px solid #999; color: #999; font-size: 14px; padding: 6px 12px; border-radius: 4px; cursor: pointer; background-color: transparent; transition: all .3s ease-in-out; } .close-button:hover { background-color: #999; color: #fff; }</pre>The above code implements the following button style:

2. Button icon

In addition to using Text descriptions, buttons can also express functions through icons. Below we will combine the font icons and custom pictures introduced previously to implement the close button with icons.

<button class="close-icon-button" onclick="window.close()">
  <i class="fas fa-times"></i>
</button>

Notice that here we have added a new class name

close-icon-button

, and also set the class name of the button embedded element ifas fa -times means using the times icon. The following is the corresponding style code:

.close-icon-button {
  border: none;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.close-icon-button:hover {
  transform: rotate(45deg);
}

.close-icon-button i {
  color: #999;
  font-size: 14px;
  transition: all .3s ease-in-out;
}

.close-icon-button:hover i {
  color: #fff;
}

The above code implements the following button style:

4. Different types of application scenarios The close button

There are many types of close buttons, and choosing different types of close buttons should be based on the needs of the actual application. This section will introduce the close button under several common needs.

1. The close button on the modal box

The modal box is a pop-up window that is widely used in web pages. At the same time, the modal box needs a close button to close the pop-up window.

Generally, the close button of the modal box should be placed in the upper right corner of the modal box. The specific implementation is as follows:

<div class="modal">
  <button class="close-icon-button" onclick="closeModal()">
    <i class="fas fa-times"></i>
  </button>
  <!-- 模态框内容 -->
</div>

Notice here that we have added a function called

closeModal ()

JavaScript function used to close the modal box. The following is the corresponding style code:

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.modal button {
  position: absolute;
  top: 10px;
  right: 10px;
}

The above code achieves the following modal box effect:

2. Multiple The close button of the tab page

In the scenario of multiple tab pages, when the user needs to close the current tab page, he can use the close button on the tab page.

The following is an example of a close button using a custom image style:

<div class="tab">
  <button class="close-tab-button" onclick="closeTab()">
    <img src="close.png" alt="">
  </button>
  <a href="#">标签页标题</a>
</div>

The corresponding CSS code is as follows:

.tab {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px 4px 0 0;
  background-color: #f7f7f7;
  position: relative;
}

.close-tab-button {
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 5px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.close-tab-button img {
  width: 16px;
  height: 16px;
}

The above code achieves the following tab page effect:

Conclusion

This article introduces the basic usage of the close button in HTML, icon style and style design, as well as the implementation of the close button in different application scenarios. I hope it can help you design web pages or applications better.

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