34+ CSS Close Buttons

A top collection of 34+ HTML and CSS close buttons. Each item is 100% free, easy to customize and sourced from GitHub, CodePen, and various other platforms.

1. Hamburger to close button

See the Pen <a href="https://codepen.io/gaurav_codes/pen/NWNdMpo"> Hamburger to close button</a> by Gaurav Patil (<a href="https://codepen.io/gaurav_codes">@gaurav_codes</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gaurav Patil
Source: Code / Demo
Created on: AUGUST 24, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

2. Simple pure css close button

See the Pen <a href="https://codepen.io/MarvinVK/pen/WNBBrP"> Simple pure css close button</a> by Marvin van Kalsbeek (<a href="https://codepen.io/MarvinVK">@MarvinVK</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marvin van Kalsbeek
Source: Code / Demo
Created on: OCTOBER 24, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

3. CSS only close button

See the Pen <a href="https://codepen.io/zachwolf/pen/AgqOok"> CSS only close button</a> by Zach Wolf (<a href="https://codepen.io/zachwolf">@zachwolf</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zach Wolf
Source: Code / Demo
Created on: JULY 12, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

4. Simple Modal w/ CSS Close Button

See the Pen <a href="https://codepen.io/stursby/pen/nzYrZy"> Simple Modal w/ CSS Close Button</a> by Charlie Hield (<a href="https://codepen.io/stursby">@stursby</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Charlie Hield
Source: Code / Demo
Created on: AUGUST 1, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

5. Hamburger Menu Button to Close Button

See the Pen <a href="https://codepen.io/JeromeRenders/pen/GqjxVL"> Open / Close button animation</a> by Jerome Renders (<a href="https://codepen.io/JeromeRenders">@JeromeRenders</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jerome Renders
Source: Code / Demo
Created on: JUNE 20, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Sass), JavaScript

6. Hover Animated Close Button

See the Pen <a href="https://codepen.io/woovils/pen/nVzLvO"> Hover Animated Close Button</a> by Michael Packard (<a href="https://codepen.io/woovils">@woovils</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Michael Packard
Source: Code / Demo
Created on: JULY 12, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

7. Open Close button demo

See the Pen <a href="https://codepen.io/icommstudios/pen/eZpgEB"> Open Close button demo</a> by Travis Hedrick (<a href="https://codepen.io/icommstudios">@icommstudios</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Travis Hedrick
Source: Code / Demo
Created on: MARCH 4, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

8. Open / Close button with animation

See the Pen <a href="https://codepen.io/murphyrandle/pen/AEvKWd"> Open / Close button with animation</a> by Murphy Randle (<a href="https://codepen.io/murphyrandle">@murphyrandle</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Murphy Randle
Source: Code / Demo
Created on: JULY 13, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS), JavaScript(CoffeeScript)

9. Close button effects

See the Pen <a href="https://codepen.io/JonasBadalic/pen/MYaMBz"> Close button effects</a> by Jonas Badalic (<a href="https://codepen.io/JonasBadalic">@JonasBadalic</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jonas Badalic
Source: Code / Demo
Created on: DECEMBER 4, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

10. Hamburger menu Transition to Close Button

See the Pen <a href="https://codepen.io/colinhx/pen/WMRPeo"> Hamburger Menu Transition to Close Button</a> by Colin (<a href="https://codepen.io/colinhx">@colinhx</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Colin
Source: Code / Demo
Created on: FEBRUARY 09, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Sass), JavaScript

11. Dots to close button

See the Pen <a href="https://codepen.io/peksipatongeis/pen/MaoQYg"> three dots to close button</a> by Pekka Wallenius (<a href="https://codepen.io/peksipatongeis">@peksipatongeis</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pekka Wallenius
Source: Code / Demo
Created on: OOCTOBER 09, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

12. A simple but interactive close button

See the Pen <a href="https://codepen.io/mariusgnicula/pen/MpzOoP"> A simple but interactive close button</a> by Marius Nicula (<a href="https://codepen.io/mariusgnicula">@mariusgnicula</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marius Nicula
Source: Code / Demo
Created on: MARCH 30, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

13. Close button

See the Pen <a href="https://codepen.io/jermbo/pen/YzLGvr"> Close Button</a> by Jermbo (<a href="https://codepen.io/jermbo">@jermbo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jermbo
Source: Code / Demo
Created on: AUGUST 12, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS((Less)

14. Back To Close by Ste

See the Pen <a href="https://codepen.io/wisd81/pen/WrqxPP"> Back To Close by Ste</a> by Stefano (<a href="https://codepen.io/wisd81">@wisd81</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stefano
Source: Code / Demo
Created on: FEBRUARY 21, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

15. Twitter close button alternative

See the Pen <a href="https://codepen.io/thebabydino/pen/jOOYzbR"> Twitter close button alternative: using <button> + pseudos (incl. hover & focus)</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: NOVEMBER 2, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

16. Pure CSS cross / close button @mixin

See the Pen <a href="https://codepen.io/cyril-lamotte/pen/bGVxjOr"> Pure CSS cross / close button @mixin</a> by Cyril Lamotte (<a href="https://codepen.io/cyril-lamotte">@cyril-lamotte</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cyril Lamotte
Source: Code / Demo
Created on: MAY 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

17. Open / Close

See the Pen <a href="https://codepen.io/knoland/pen/QNqwzp"> Open / Close</a> by Jonathan Blair (<a href="https://codepen.io/knoland">@knoland</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jonathan Blair
Source: Code / Demo
Created on: APRIL 01, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS),(JavaScript)

18. Hamburger animation

See the Pen <a href="https://codepen.io/aaroniker/pen/LXVqxR"> Hamburger animation</a> by Aaron Iker (<a href="https://codepen.io/aaroniker">@aaroniker</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aaron Iker
Source: Code / Demo
Created on: NOVEMBER 06, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), (JavaScript)

19. Close button

See the Pen <a href="https://codepen.io/perry_nt/pen/NxobOm"> Close button</a> by Paraskevas Dinakis (<a href="https://codepen.io/perry_nt">@perry_nt</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Paraskevas Dinakis
Source: Code / Demo
Created on: FEBRUARY 12, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Close Button

See the Pen <a href="https://codepen.io/sawmon_and_natalie/pen/oNjwrRb"> Close Button</a> by Saw-mon & Natalie (<a href="https://codepen.io/sawmon_and_natalie">@sawmon_and_natalie</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Saw-mon & Natalie
Source: Code / Demo
Created on: APRIL 29, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (SCSS)

21. Press ✕ 2s to action

See the Pen <a href="https://codepen.io/juanbrujo/pen/GgbOyW"> Press ✕ 2s to action</a> by Jorge Epuñan (<a href="https://codepen.io/juanbrujo">@juanbrujo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jorge Epunan
Source: Code / Demo
Created on: APRIL 10, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

22. Chat Bubble

See the Pen <a href="https://codepen.io/ainalem/pen/xxwxxRE"> Chat Bubble</a> by Mikael Ainalem (<a href="https://codepen.io/ainalem">@ainalem</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mikael Ainalem
Source: Code / Demo
Created on: APRIL 09, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. close button

See the Pen <a href="https://codepen.io/angro/pen/bGdVqXv"> close button</a> by Antonio Grosz (<a href="https://codepen.io/angro">@angro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Antonio Grosz
Source: Code / Demo
Created on: FEBRUARY 12, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

24. Pure CSS close icon

See the Pen <a href="https://codepen.io/ndeniche/pen/rNPjmg"> Pure CSS close icon</a> by ndeniche (<a href="https://codepen.io/ndeniche">@ndeniche</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ndeniche
Source: Code / Demo
Created on: OCTOBER 1, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (SCSS)

25. Pure css close button

See the Pen <a href="https://codepen.io/jediego/pen/zqVvBZ"> Pure css close button</a> by Carson (<a href="https://codepen.io/jediego">@jediego</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Carson
Source: Code / Demo
Created on: MAY 19, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Less)

26. Close button

See the Pen <a href="https://codepen.io/merrybottle/pen/PdwXYO"> Close button</a> by merrybottle (<a href="https://codepen.io/merrybottle">@merrybottle</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Merrybottle
Source: Code / Demo
Created on: AUGUST 22, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

27. animated close icon

See the Pen <a href="https://codepen.io/rsbear/pen/edGEbd"> animated close icon</a> by ross s (<a href="https://codepen.io/rsbear">@rsbear</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ross s
Source: Code / Demo
Created on: OCTOBER 02, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

28. Line Menu Icon that Expands Into Actual Menu

See the Pen <a href="https://codepen.io/chriscoyier/pen/nVqMVV"> Line Menu Icon that Expands Into Actual Menu</a> by Chris Coyier (<a href="https://codepen.io/chriscoyier">@chriscoyier</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Choyier
Source: Code / Demo
Created on: DECEMBER 08, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

29. Close button animated

See the Pen <a href="https://codepen.io/copist/pen/LYjxrGm"> Close button animated</a> by Pavel Volyntsev (<a href="https://codepen.io/copist">@copist</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pavel Volyntsev
Source: Code / Demo
Created on: OCTOBER 24, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

30. Simple close button animation

See the Pen <a href="https://codepen.io/keithchis/pen/xwLoMJ"> Simple Close Button Animation</a> by Keith Chisholm (<a href="https://codepen.io/keithchis">@keithchis</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Keith Chisholm
Source: Code / Demo
Created on: OCTOBER 14, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

31. Close Animation

See the Pen <a href="https://codepen.io/maneeshc/pen/pPxKQm"> Close Animation</a> by Maneesh (<a href="https://codepen.io/maneeshc">@maneeshc</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Maneesh
Source: Code / Demo
Created on: MAY 19, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

32. Add and close toggle button

See the Pen <a href="https://codepen.io/coswise/pen/WNROyLX"> UI // Add & Close Toggle Button</a> by Cosimo Scarpa (<a href="https://codepen.io/coswise">@coswise</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cosimo Scarpa
Source: Code / Demo
Created on: APRIL 05, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

33. Close Button & Dialog Animation

See the Pen <a href="https://codepen.io/danielvillalba/pen/gZqJem"> Information to Close Button & Dialog Animation</a> by Daniel Villalba (<a href="https://codepen.io/danielvillalba">@danielvillalba</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daniel Villalba
Source: Code / Demo
Created on: JANUARY 15, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

34. close-button

See the Pen <a href="https://codepen.io/eelke/pen/qZNOvr"> close-button</a> by eelke (<a href="https://codepen.io/eelke">@eelke</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: elke
Source: Code / Demo
Created on: MARCH 10, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug),CSS (SCSS), Javascript

35. Close button with css and jquery

See the Pen <a href="https://codepen.io/salraza1993/pen/PpoMKb"> Close button with css and jquery</a> by Salman Raza (<a href="https://codepen.io/salraza1993">@salraza1993</a>) on <a href="https://codepen.io">CodePen</a>. Author: Salman Raza
Source: Code / Demo
Created on: FEBRUARY 24, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript