How to Close a Button in CSS

A close button is usually a small “X” button that lets users dismiss a modal, banner, alert, or menu. CSS can create and style the button, while JavaScript handles the actual closing behavior.

What you’ll build or solve

You’ll build a reusable close button with HTML and CSS. Done means the button looks like a clear “X,” works with keyboard focus styles, and can be connected to JavaScript when you need it to hide something.

When this approach works best

This approach works best when:

• You need a close button for a modal window.
• You want to dismiss an alert, banner, toast, or popup.
• You need an “X” button in a mobile menu.
• You want a custom close icon without using an image file.

This is a bad idea if you expect CSS alone to remove an element from the page after a click. CSS can style the close button, but JavaScript usually handles the click action.

Prerequisites

• A basic HTML file
• A CSS file or <style> block
• Basic knowledge of HTML buttons and CSS selectors

No icon library is required.

Step-by-step instructions

Step 1: Add the button in HTML

Start with a real <button> element. This keeps the control keyboard-friendly and easier for screen readers to understand.

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

The × character creates a simple close icon. The aria-label tells assistive technology what the button does.

You can place it inside a component:

<div class="alert">
    <p>Your settings have been saved.</p>

    <button class="close-button" aria-label="Close">
        ×
    </button>
</div>

This gives CSS a clear structure to style and position.

Step 2: Reset the default button styles

Browsers add default button styles like borders, backgrounds, and padding. Remove them first so the button is easier to style.

.close-button {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

This creates a clean starting point.

You can then add a fixed size:

.close-button {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

A square button gives users a predictable click target.

Step 3: Style the visible “X”

Now style the close icon so it looks clear and balanced.

.close-button {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}

You can center the icon with flexbox:

.close-button {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

This keeps the “X” centered inside the button.

What to look for

• The button should be large enough to click comfortably.
• The “X” should sit in the visual center.
• The button should still be a real <button>, not a <div>.

Step 4: Create the “X” with CSS

You can draw the close icon with CSS instead of using the × character. This gives you more control over the shape.

Update the HTML:

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

Then use pseudo-elements:

.close-button {
    position: relative;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.close-button::before,
.close-button::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 2px;
    background: currentColor;
    left: 7px;
    top: 15px;
}

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

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

currentColor makes the lines use the button’s text color. You can change the icon color with one property:

.close-button {
    color: #333;
}

This version is useful when you want a cleaner custom icon.

Step 5: Add hover and focus states

A close button should respond when users hover or focus it.

.close-button:hover {
    background: #f2f2f2;
}

.close-button:focus-visible {
    outline: 2px solid #333;
    outline-offset: 2px;
}

You can also make it circular:

.close-button {
    border-radius: 50%;
}

The focus style matters because keyboard users need to see which element is active.

Step 6: Position it inside a component

Close buttons often sit in the top-right corner of a container.

<div class="modal">
    <button class="close-button" aria-label="Close"></button>

    <h2>Newsletter signup</h2>
    <p>Join our list for weekly coding tips.</p>
</div>

Use absolute positioning:

.modal {
    position: relative;
    padding: 24px;
    max-width: 400px;
    border: 1px solid #ddd;
    border-radius: 12px;
}

.modal .close-button {
    position: absolute;
    top: 12px;
    right: 12px;
}

The parent needs position: relative so the button positions itself inside the modal instead of the whole page.

Step 7: Add JavaScript to actually close the element

CSS styles the button, but it does not remove the modal or alert after a click. Add a small script for that behavior.

<div class="alert" id="save-alert">
    <p>Your settings have been saved.</p>
    <button class="close-button" aria-label="Close"></button>
</div>

<script>
const alertBox = document.querySelector("#save-alert");
const closeButton = alertBox.querySelector(".close-button");

closeButton.addEventListener("click", () => {
    alertBox.hidden = true;
});
</script>

The hidden attribute hides the alert from the page and from assistive technology.

Examples you can copy

Example 1: Simple text-based close button

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

.close-button {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

This is the fastest version when you want a simple “X.”

Example 2: CSS-only icon button

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

.close-button {
    position: relative;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #222;
    cursor: pointer;
}

.close-button::before,
.close-button::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    background: currentColor;
    left: 8px;
    top: 17px;
}

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

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

.close-button:hover {
    background: #eee;
}

.close-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

This version does not need an icon file or external library.

Example 3: Close button inside a notification

<div class="notice" id="notice">
    <p>Your profile was updated.</p>
    <button class="close-button" aria-label="Close"></button>
</div>

<script>
const notice = document.querySelector("#notice");
const button = notice.querySelector(".close-button");

button.addEventListener("click", () => {
    notice.hidden = true;
});
</script>

.notice {
    position: relative;
    padding: 16px 48px 16px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.notice .close-button {
    position: absolute;
    top: 8px;
    right: 8px;
}

This creates a dismissible notification with a close button in the corner.

Common mistakes and how to fix them

Mistake 1: Using a <div> instead of a button

What you might do:

<div class="close-button">×</div>

Why it breaks: A <div> is not a button. It does not support keyboard interaction or button behavior by default.

Correct approach:

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

Use the right HTML element first, then style it with CSS.

Mistake 2: Forgetting the accessible label

What you might do:

<button class="close-button">×</button>

Why it breaks: Screen readers may announce the symbol poorly or not explain the button’s purpose clearly.

Correct approach:

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

The label makes the action clear.

Mistake 3: Expecting CSS to close the element

What you might do:

.close-button:active {
    display: none;
}

Why it breaks: This hides the button while it is active, not the modal, alert, or menu.

Correct approach:

closeButton.addEventListener("click", () => {
    modal.hidden = true;
});

Use CSS for styling and JavaScript for behavior.

Troubleshooting

If the “X” is off-center, use display: inline-flex, align-items: center, and justify-content: center.

If pseudo-elements do not appear, check that content: "" is set on ::before and ::after.

If the button appears outside the modal, add position: relative to the parent container.

If the close button is hard to click, increase its width and height.

If keyboard focus is invisible, add a :focus-visible style.

If clicking does nothing, add JavaScript to hide or remove the target element.

Quick recap

• Use a real <button> for close controls.
• Add aria-label="Close" for accessibility.
• Use CSS to style the “X” with text or pseudo-elements.
• Add hover and focus states.
• Position the button inside a relative parent.
• Use JavaScript to actually close or hide the element.