25+ Perfect CSS Close Buttons (Free Code + Demos)

Enjoy this 100% free and open source collection of HTML and CSS close button code examples. These close buttons are beautiful designed and are sure to improve your website.

1. CSS Close Button

CSS Close Buttons - CSS Close Button
Author: merrybottle (merrybottle)
Created on: August 22, 2018
Made with: HTML, CSS

2. A Simple But Interactive CSS Close Button

CSS Close Buttons - A Simple But Interactive CSS Close Button
Author: Marius Nicula (mariusgnicula)
Created on: March 30, 2017
Made with: HTML, SCSS

3. CSS Close Animation

CSS Close Buttons - CSS Close Animation
A little close animation that's not a hamburger to close animation
Author: Maneesh (maneeshc)
Created on: May 19, 2017
Made with: HTML, SCSS
Tags: close, animation, transition, hamburger, menu

4. Animated Close Icon

CSS Close Buttons - animated close icon
Author: ross s (rsbear)
Created on: October 1, 2016
Made with: HTML, SCSS

5. Open / Close Arrow

CSS Close Buttons - Open / Close Arrow
Implementation of Dann Petty's open close animation. https://dribbble.com/shots/1621359-Open-Close-Icon-Animation
Author: Jonathan Blair (knoland)
Created on: March 31, 2016
Made with: HTML, SCSS, JS
Tags: css, css3, dropdown

6. Open / Close Button Animation

CSS Close Buttons - Open / Close Button Animation
Fun times with CSS3 animations
Author: Jerome Renders (JeromeRenders)
Created on: June 20, 2016
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css3, animation, sass, button, menu

7. Close Button - CSS

CSS Close Buttons - Close Button - CSS
Author: Marius Nicula (mariusgnicula)
Created on: March 30, 2017
Made with: HTML, SCSS

8. Back To Close By STE

CSS Close Buttons - Back To Close By STE
Author: Stefano (wisd81)
Created on: February 21, 2016
Made with: HTML, CSS, JS
Tags: icons

9. Close Button

CSS Close Buttons - Close Button
A site required a close button, so I thought I would test something out to see the code required. Its a simple animation but looks so damn good :P
Author: Jermbo (jermbo)
Created on: August 11, 2014
Made with: HTML, Less
Tags: jermbo, css, animation, less, button

10. Pure CSS Close Icon

CSS Close Buttons - Pure CSS close icon
Concept by Rubén Reyes. Feel free to play around with it, animate it, integrated with burger icons, etc.
Author: ndeniche (ndeniche)
Created on: October 1, 2014
Made with: HTML, SCSS, JS
Tags: close, icon, css, pure-css

11. Close Buttons :Hover :Focus And :Active

CSS Close Buttons - Close Buttons :Hover :Focus and :Active
Author: Salman Raza (salmanraza)
Made with: HTML, CSS, JS

12. Open And Close Button With Animation

CSS Close Buttons - Open And Close Button With Animation
Author: Martin Wolf (martinwolf)
Created on: September 27, 2013
Made with: HTML, SCSS, JS
Tags: open, close, css-transition, css-animation

13. CSS Close Button

CSS Close Buttons - CSS close button
Forked from shvetsovdm's Pen CSS close button by shvetsovdm.
Author: Nouamane houssin (schneider)
Created on: April 17, 2015
Made with: HTML, CSS
Tags: close, button

14. Hover Animated Close Button

CSS Close Buttons - Hover Animated Close Button
Simple "X" close button for a modal or any type of form or pop-up -- on hover
Author: Michael Packard (woovils)
Created on: July 11, 2013
Made with: HTML, SCSS, JS
Tags: css3, transform, transition, hover

15. Close Button

CSS Close Buttons - Close Button
A site required a close button, so I thought I would test something out to see the code required. Its a simple animation but looks so damn good :P
Author: Jermbo (jermbo)
Created on: August 11, 2014
Made with: HTML, Less
Tags: jermbo, css, animation, less, button

16. Hamburger Menu Transition To Close Button

CSS Close Buttons - Hamburger Menu Transition to Close Button
Hamburger menu transition. Click to transit menu icon to close button , click close button to transit back to menu icon.
Author: Colin (colinhx)
Created on: February 9, 2018
Made with: HTML, Sass, JS
Tags: ui, css, animation, hamburger menu transition, button-animation

17. Three Dots To Close Button

CSS Close Buttons - three dots to close button
Using three dots to represent navigation, animate to close button on click.
Author: Pekka Wallenius (peksipatongeis)
Created on: October 9, 2015
Made with: HTML, SCSS, JS
Tags: hamburger, nav-toggle, navigation, close, close-button

18. Bootstrap Close Button

CSS Close Buttons - Bootstrap close button
Easily replace default button with this one - CSS only.
Author: Przemysław (themeler)
Created on: February 13, 2015
Made with: HTML, Less

19. Responsive Banner Ad Widget With Close Button

CSS Close Buttons - Responsive Banner Ad Widget With Close Button
The actual and best advantage of this type of widget is that, if your visitors bother with ads (that you are displaying on your blog) and they want to remove it then he can easily close it in just one single click.
Author: Prince (Askwithloud)
Created on: October 12, 2015
Made with: HTML, CSS
Tags: widgets, tutorial, ad widget, html

20. Magnifier To Close Button Animation

CSS Close Buttons - Magnifier to close button animation
I want to create a magnifier icon that turns into a cross when clicked. In combination with a sliding search field, this would be the indicator for both: open search field and when open, indicate the buttons new close function.
Author: hyperheld (thusslack)
Created on: November 13, 2014
Made with: HTML, SCSS, JS
Tags: css3, animation, magnifier, icon, search

21. All CSS Plus To Close Button With Animation

CSS Close Buttons - All CSS Plus to Close button with Animation
Pure CSS button including plus and close symbols. On click it animates from plus or more to close.
Author: Leslie Sultani (lsultani)
Created on: May 18, 2016
Made with: HTML, SCSS, JS
Tags: css, animation, button, close