30 CSS Close Button Examples

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

css close button orange purple gradient background

Hover to play
Title:

Close button animated

Author:

Pavel Volyntsev

Created on:

October 25, 2021

Made with:

HTML, SCSS, jQuery

Responsive:

Yes

Dependencies:

Saas, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, morph segmented icon for a close button is created using HTML, SCSS, and jQuery. When you click on the icon, it will toggle into a close button with smooth animations.

Hover to play
Title:

Add and close toggle button

Author:

Cosimo Scarpa

Created on:

April 11, 2021

Made with:

HTML, SCSS, jQuery

Responsive:

Yes

Dependencies:

Saas, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, add and close toggle 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.

Hover to play
Title:

Close button

Author:

Jermbo

Created on:

August 11, 2014

Made with:

HTML, CSS(Less)

Responsive:

No

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Animated close button

Author:

Paraskevas Dinakis

Created on:

June 08, 2016

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Responsive bodymovin modal

Author:

Jonas Sandstedt

Created on:

December 17, 2016

Made with:

HTML, SCSS, Javascript

Responsive:

Yes

Dependencies:

Saas

Compatable 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.

Hover to play
Title:

Hamburger animation

Author:

Aaron Iker

Created on:

July 22, 2019

Made with:

HTML, CSS, Javascript

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful hamburger animation with a close button is 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.

Hover to play
Title:

Pure css close button

Author:

Carson

Created on:

May 19, 2016

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Hamburger menu to close button

Author:

Colin

Created on:

February 12, 2018

Made with:

HTML, Sass, JavaScript

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, hamburger menu to close button is 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.

Hover to play
Title:

Dots to close button

Author:

Pekka Wallenius

Created on:

October 13, 2015

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Saas, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic, three dots gets converted to 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.

Hover to play
Title:

Css close button

Author:

Ilker Yilmaz

Created on:

June 08, 2016

Made with:

HTML, CSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, simple close button is created using HTML and SCSS. When you hover over the button, it will cut the lines of a cross icon and separate them with quick animation effects.

Hover to play
Title:

Click and hold close button

Author:

Jorge Epunan

Created on:

April 10, 2015

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatable 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.

Hover to play
Title:

Close button css interaction

Author:

James Bosworth

Created on:

March 26, 2017

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An amazing close button is created using HTML and SCSS. When you hover over the button, it will show animation with lines giving a very different look to the web page.

Hover to play
Title:

Cross close button

Author:

Cyril Lamotte

Created on:

May 15, 2020

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, pure CSS cross buttons are created using HTML and SCSS. When you hover over the button, it will spin the cross icon with a quick transition and also change the background color to a little dark blue with a smooth effect.

Hover to play
Title:

Open close button animation

Author:

Jerome Renders

Created on:

June 20, 2016

Made with:

HTML, SCSS, Javascript

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, classic hamburger close button is 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.

Hover to play
Title:

Simple close button animation

Author:

Keith Chisholm

Created on:

October 13, 2015

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, simple close button is 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.

Hover to play
Title:

Close button with gradient background

Author:

Merrybottle

Created on:

September 10, 2019

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, simple 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.

Hover to play
Title:

Shiny close button

Author:

Antonio Grosz

Created on:

February 12, 2020

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A shiny close button is created using HTML and SCSS. When you hover over the button, it will change the background color to pure transparent color and also show nice animation with lines. It looks great with dark color scheme websites.

Hover to play
Title:

Open close button

Author:

Jonathan Blair

Created on:

March 31, 2016

Made with:

HTML, SCSS, Javascript

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A decorous, open/Close button is 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.

Hover to play
Title:

Close dialog button

Author:

Daniel Villalba

Created on:

March 06, 2019

Made with:

HTML, SCSS, Javascript

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, 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.

Hover to play
Title:

Rotating close button

Author:

Swamon & Natalie

Created on:

April 28, 2020

Made with:

HTML(Pug), SCSS

Responsive:

No

Dependencies:

Saas

Compatable 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.

Hover to play
Title:

Glowing close button

Author:

Eelke

Created on:

June 14, 2016

Made with:

HTML(Pug), SCSS, Javascript

Responsive:

No

Dependencies:

Saas

Compatable 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.

Hover to play
Title:

Pop up with blurred background

Author:

Benjamin Dalton

Created on:

December 31, 2014

Made with:

HTMl, CSS, jQuery

Responsive:

Yes

Dependencies:

jQuery

Compatable 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.

Hover to play
Title:

Animated close icon

Author:

Ross S

Created on:

October 01, 2016

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, animated close button created using HTML and SCSS. When you hover over the button, it will flip both cross lines and change the color of the icon with smooth animation. It also shows the button text with a smooth fade-in effect.

Hover to play
Title:

Interactive close button

Author:

Marius Nicula

Created on:

May 18, 2017

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable 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.

Hover to play
Title:

Close button hover effect

Author:

Remi Lacorne

Created on:

September 12, 2014

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A sophisticated 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.

Hover to play
Title:

Close button effects

Author:

Jonas Badalic

Created on:

January 06, 2015

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Saas, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A variety of 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.

Hover to play
Title:

Css close icon

Author:

Alex Insayt

Created on:

April 15, 2015

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Saas, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple 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.

Hover to play
Title:

Open close icon animation

Author:

Jitendra

Created on:

July 18, 2014

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Saas, jQuery

Compatable 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.

Hover to play
Title:

Shrink invert spin close button

Author:

Dinkelborg

Created on:

June 06, 2017

Made with:

HTML5, CSS

Responsive:

No

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Animated open close button

Author:

Murphy Randle

Created on:

July 15, 2013

Made with:

HTML, SCSS, JS(CoffeeScript)

Responsive:

Yes

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic 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.