How to Create a Close Button in HTML CSS[With Examples]

Advertisement

Close buttons also called cancel buttons can be used to dismiss items on a website like menus, modals, and popups.

1. Close Button CSS 1: Times

You can make a close button using the times(×) symbol.

HTML Code

<span class="close">&times;</span>

CSS Code

.close {
  font-size: 45px;
  font-weight: 600;
}

Result

CSS Close Button

2. Close Button CSS 2: Plus

You can also create a close button using the plus(+) symbol.

Advertisement

You will need to rotate the plus sign so that it looks like a cancel button.

HTML Code

<div>
  <span class="close">+</span>
</div>

CSS Code

.close {
  font-size: 45px;
  font-weight: 600;
  display: inline-block;
  transform: rotate(45deg);
}

Result

CSS Close Button

3. Close Button CSS 3

You can also use an SVG image of a cancel button for your close button.

HTML

<div class="nav-cancel is-active" id="nav-cancel">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>
</div>

Result

CSS Close Button

4. Close Button CSS 4

You can also build a close button bulma style.

HTML

<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

CSS

.navbar-burger {
  cursor: pointer;
  display: block;
  height: 3.25rem;
  position: relative;
  width: 3.25rem;
}
.navbar-burger span {
  background-color: currentColor;
  display: block;
  height: 1px;
  left: calc(50% - 8px);
  position: absolute;
  transform-origin: center;
  transition-duration: 86ms;
  transition-property: background-color,opacity,transform;
  transition-timing-function: ease-out;
  width: 16px;
}
.navbar-burger span:nth-child(1) {
  top: calc(50% - 6px);
}
.navbar-burger span:nth-child(2) {
  top: calc(50% - 1px);
  display: none;
}
.navbar-burger span:nth-child(3) {
  top: calc(50% + 4px);
}
.navbar-burger span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.navbar-burger span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

Result

CSS Close Button

5. Close Button CSS 5: Before and After

You can also create a close button using Pseudo elements in CSS.

HTML Code

<span class="close"></span>

CSS Code

.close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 0.7;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

Result

CSS Close Button

6. Bootstrap Close Button

You can also create a close button on your website using Bootstrap.

HTML Code

<button type="button" class="btn-close" aria-label="Close"></button>

Remember to import Bootstrap to your website before attempting to add the button.

Result

Bootstrap Close Button

author's bio photo

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.