30 CSS Close Button Examples

A collection of the top free HTML and CSS close buttons. Each of these CSS close button code examples contains unique visual designs, effects, animations, and code that make them ideal for implementation in various app and web development applications.

css close button orange purple gradient background

Title:

Add and close toggle button

Author:

Cosimo Scarpa

Created on:

April 11, 2021

Made with:

HTML, SCSS, jQuery

Responsive:

Yes

Dependencies:

Saas, jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful CSS close button created using HTML, SCSS, and jQuery. When you click on the button, it will toggle the state between two icons with a nice animation effect it will convert the icon into a dot and at the end cross icon.

Title:

Close button

Author:

Jermbo

Created on:

August 11, 2014

Made with:

HTML, CSS(Less)

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, animated close button with a spinning animation effect on the icon is created using HTML and CSS(Less). When you hover over the button, it will make a cross icon to a simple horizontal line with a quick animation effect.

Title:

Animated close button

Author:

Paraskevas Dinakis

Created on:

June 08, 2016

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic, close button on the black background with hover effects is created using pure HTML and CSS. When you hover over the button, it will convert the cross icon into the back button, with a nice fade-in effect for the text and animation effect for lines.

Title:

Responsive bodymovin modal

Author:

Jonas Sandstedt

Created on:

December 17, 2016

Made with:

HTML, SCSS, Javascript

Responsive:

Yes

Dependencies:

Saas

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An awesome, responsive close button is created using HTML, CSS, and JavaScript. When you click on the button, it will show the shrinking body effect to look like a fluid motion.

Title:

Hamburger animation

Author:

Aaron Iker

Created on:

July 22, 2019

Made with:

HTML, CSS, Javascript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful hamburger animation with a CSS close button created using HTML, SCSS, and JavaScript. When you click on the button, it will convert the hamburger menu into a close button with amazing animation effects for lines.

Title:

Pure css close button

Author:

Carson

Created on:

May 19, 2016

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, close button is created using pure HTML and CSS. When you hover over the button, it will make the background color transparent orange with a nice fade-in effect, and also spin animation effects are given for the cross icon.

Title:

Close button animated

Author:

Pavel Volyntsev

Created on:

October 25, 2021

Made with:

HTML, SCSS, jQuery

Responsive:

Yes

Dependencies:

Saas, jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful CSS close button morphed from an icon created using HTML, SCSS, and jQuery. When you click on the icon, it will toggle into a close button with smooth animations.

Title:

Hamburger menu to close button

Author:

Colin

Created on:

February 12, 2018

Made with:

HTML, Sass, JavaScript

Responsive:

No

Dependencies:

Saas

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, hamburger menu to CSS close button created using HTML, Sass, and JavaScript. When you click on the button, it will toggle the state between both icons with quick transition effects given for lines that look amazing.

Title:

Dots to close button

Author:

Pekka Wallenius

Created on:

October 13, 2015

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Saas, jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic, three dots gets converted to a CSS close button with an amazing animation. It is created using HTML, SCSS, and jQuery. When you click on the button, it will toggle the state between three dots and close button with an awesome animation effect given for the lines.

Title:

Line Menu Icon that Expands Into Actual Menu

Author:

Chris Choyier

Created on:

December 08, 2013

Made with:

HTML, SCSS, Javascript

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, simple CSS close button created using HTML, SCSS and Javascript. When you click the menu button a pop-up opens up with a beautiful animation and a cool close button.

Title:

Click and hold close button

Author:

Jorge Epunan

Created on:

April 10, 2015

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A stylish, modern close button is created using HTML, CSS, and jQuery. When you click and hold the button, it will fill the border with a white color to indicate the process with a smooth transition. When you hover over the button, it’s color slightly changes to give a highlighting effect.

Title:

1 hour tasks(Responsive ReactJS app)

Author:

Alina

Created on:

February 24, 2022

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

This amazing CSS close button is built to provide amazing contrast in relation to the opened window. Created with HTML and CSS, this one looks beautiful.

Title:

Close animation

Author:

Maneesh

Created on:

May 19, 2017

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, close button created with SCSS and Javascript. Triggers a cool animation on click and button release.

Title:

Open close button animation

Author:

Jerome Renders

Created on:

June 20, 2016

Made with:

HTML, SCSS, Javascript

Responsive:

No

Dependencies:

Saas

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, classic hamburger CSS close button created using HTML(Pug), Sass, and Javascript. When you hover over the close button, it will change to the dark icon color. When you click on the button, it will toggle the state between hamburger and cross icon with amazing animation.

Title:

Simple close button animation

Author:

Keith Chisholm

Created on:

October 13, 2015

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An beautiful yet simple CSS close button created using HTML and Sass. When you hover over the button, it will spin the cross icon in the button with a smooth transition effect along with changing the color. Button shadows are also given to give a decent look to the web page.

Title:

Close button with gradient background

Author:

Merrybottle

Created on:

September 10, 2019

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, simple CSS close button is created using HTML and Sass. When you hover over the button, it will animate the cross icon in the button with a smooth transition. Button looks amazing with the gradient background.

Title:

Hover Icons[mac os-min,max,close]

Author:

Sikriti Dakua

Created on:

March 19, 2019

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

Super fun, sleek-looking Mac Os style CSS close button with an icon hover effect to make it more user-friendly. Created using HTML and CSS which makes it super easy to implement.

Title:

Open close button

Author:

Jonathan Blair

Created on:

March 31, 2016

Made with:

HTML, SCSS, Javascript

Responsive:

No

Dependencies:

Saas

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A decorous CSS close button created using HTML, SCSS, and Javascript. When you click on the button, it will toggle the state between icon. It will change the icon to cross with nice animation and also change the background with a nice fade-in effect.

Title:

Close dialog button

Author:

Daniel Villalba

Created on:

March 06, 2019

Made with:

HTML, SCSS, Javascript

Responsive:

No

Dependencies:

Saas

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful CSS close button with dialog animation is created using HTML, SCSS, and Javascript. When you click on the button, it will show the dialog with a nice fade-in effect and also change the button icon to cross with nice animations. When you hover over the information icon, its color changes to light blue with a cool animations.

Title:

Rotating close button

Author:

Swamon & Natalie

Created on:

April 28, 2020

Made with:

HTML(Pug), SCSS

Responsive:

No

Dependencies:

Saas

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple close button with a orange background is created using HTML(Pug) and SCSS. When you hover over the button, it will rotate the cross icon with a smooth transition effect to make it look like a plus icon.

Title:

Glowing close button

Author:

Eelke

Created on:

June 14, 2016

Made with:

HTML(Pug), SCSS, Javascript

Responsive:

No

Dependencies:

Saas

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A glowing border close buttons with infinite animations are created using HTML(Pug), SCSS, and Javascript. It will show the animation with a blinking border effect converted into round borders from square borders.

Title:

Pop up with blurred background

Author:

Benjamin Dalton

Created on:

December 31, 2014

Made with:

HTMl, CSS, jQuery

Responsive:

Yes

Dependencies:

jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful article with a blurred background is popped up with a note having close button. It is created using HTML, CSS and jQuery. When you close the pop up with a close button, article is displayed with normal content.

Title:

CSS Window Title Bar Buttons

Author:

Wesllieh

Created on:

December 11, 2015

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A minimal yet sleek CSS close button that perfectly resembles the windows title bar with a red background hover effect.

Title:

Interactive close button

Author:

Marius Nicula

Created on:

May 18, 2017

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, interactive close button is created using HTML and SCSS. When you hover over the button, it will change the cross icon color from orange to blue with a smooth fade-in effect. Shadows are given on the border; it looks great with white color scheme websites.

Title:

Close button hover effect

Author:

Remi Lacorne

Created on:

September 12, 2014

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A sophisticated CSS close button with hover effects is created using pure HTML and SCSS. When you hover over the button, it will fill the button background with light green and expand the cross icon with color change and a smooth transition effect.

Title:

Close button effects

Author:

Jonas Badalic

Created on:

January 06, 2015

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Saas, jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A variety of CSS close buttons with different animation effects are created using HTML, SCSS, and jQuery. This covers most of the animation effects and name is written in each animation with the label.

Title:

Css close icon

Author:

Alex Insayt

Created on:

April 15, 2015

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Saas, jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple CSS close button created using HTML, SCSS, and jQuery. When you click on the button, it will toggle the state between the hamburger icon to the close button icon with smooth animation effects.

Title:

Open close icon animation

Author:

Jitendra

Created on:

July 18, 2014

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Saas, jQuery

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple plain close button is created using HTML, CSS, and jQuery. When you click on the button, it will toggle the state between the down arrow and close button icon with smooth animation effects and also toggle the state of the text in the button.

Title:

Shrink invert spin close button

Author:

Dinkelborg

Created on:

June 06, 2017

Made with:

HTML5, CSS

Responsive:

No

Dependencies:

nan

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, three close buttons with different types of animation effects are created using pure HTML and CSS. When you hover over this buttons, it will show the shrink, invert and spin effects.

Title:

Animated open close button

Author:

Murphy Randle

Created on:

July 15, 2013

Made with:

HTML, SCSS, JS(CoffeeScript)

Responsive:

Yes

Dependencies:

Saas

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic CSS close button with the reddish background is created using HTMl, SCSS and JS. When you click on the button, it will toggle between close button and plus button.