34+ CSS Close Buttons

If you are a web designer or developer looking for a visually stunning collection of CSS close buttons, you’re in the right spot. CSS close buttons are the imperative GUI elements mainly used in user interfaces. These close buttons provide a subtle way to dismiss pop-ups, modals, and notifications on websites or web applications.

In this comprehensive collection, we are featuring 34+ HTML and CSS class button code examples that we have sourced from GitHub, CodePen, and various other platforms.

From simple close buttons to custom-designed icons to animated close icons to eye-catching hover effects with stylish animations, we have something for everyone. Our compilation offers stylish close-button designs and cross-browser support. Each item is created to provide the blissful user experience that your site visitors want.

Let’s look at our top collection of CSS close buttons to improve user interaction and experience with your web application.

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