Friends, today I am bursting with excitement to share the most amazing collection of CSS close button designs you will ever see! We’ve scoured the entire internet to find the best of the best CSS close button code examples.
The close button is so important for any website. It allows users to easily remove or hide content when they’re done with it. But too often, close buttons are boring! They don’t capture a user’s attention or clearly communicate their purpose.
Not anymore! This post is packed with incredibly creative and visually stunning animated close-button styles. I’m telling you, once you see these designs, you’ll be blown away by the possibilities. The code is fully customizable too, so you can tweak the colors, sizes, shapes, or animations however you like.
Are you ready to be inspired? I can’t wait to show you our carefully curated selection of close buttons. Developers and designers alike will find tons of new ideas to take their projects to the next level. The visuals and user experience of your apps will be elevated in ways you never thought possible.
It’s close-button paradise in here, people! Dive in and get ready to fall in love with the power of CSS all over again.
01. Close button
See the Pen
Close Button by Jermbo (@jermbo)
on CodePen.
Author: Jermbo @jermbo
Links: Source Code / Demo
Created on: August 12, 2014
Made with: HTML, CSS(Less)
02. Open / Close
See the Pen
Open / Close by Jonathan Blair (@knoland)
on CodePen.
Author: Jonathan Blair @knoland
Links: Source Code / Demo
Created on: April 01, 2016
Made with: HTML, CSS (SCSS), JS
03. Press ✕ 2s to action
See the Pen
Press ✕ 2s to action by Jorge Epuñan (@juanbrujo)
on CodePen.
Author: Jorge Epunan @juanbrujo
Links: Source Code / Demo
Created on: April 10, 2015
Made with: HTML, CSS, JS
04. Close button
See the Pen
Close button by merrybottle (@merrybottle)
on CodePen.
Author: Merrybottle @merrybottle
Links: Source Code / Demo
Created on: August 22, 2018
Made with: HTML, CSS
05. Close button animated
See the Pen
Close button animated by Pavel Volyntsev (@copist)
on CodePen.
Author: Pavel Volyntsev @copist
Links: Source Code / Demo
Created on: October 24, 2021
Made with: HTML, CSS (SCSS), JS
06. Close Animation
See the Pen
Close Animation by Maneesh (@maneeshc)
on CodePen.
Author: Maneesh @maneeshc
Links: Source Code / Demo
Created on: May 19, 2017
Made with: HTML, CSS (SCSS)
07. Twitter close button alternative
See the Pen
Twitter close button alternative: using <button> + pseudos (incl. hover & focus) by Ana Tudor (@thebabydino)
on CodePen.
Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: November 2, 2019
Made with: HTML, CSS(SCSS)
08. Dots to close button
See the Pen
three dots to close button by Pekka Wallenius (@peksipatongeis)
on CodePen.
Author: Pekka Wallenius @peksipatongeis
Links: Source Code / Demo
Created on: October 09, 2015
Made with: HTML, CSS(SCSS), JS
09. Back To Close by Ste
Author: Stefano @wisd81
Links: Source Code / Demo
Created on: February 21, 2016
Made with: HTML, CSS, JS
10. Hamburger animation
See the Pen
Hamburger animation by Aaron Iker (@aaroniker)
on CodePen.
Author: Aaron Iker @aaroniker
Links: Source Code / Demo
Created on: November 06, 2018
Made with: HTML, CSS(SCSS), JS
11. close button
See the Pen
close button by Antonio Grosz (@angro)
on CodePen.
Author: Antonio Grosz @angro
Links: Source Code / Demo
Created on: February 12, 2020
Made with: HTML, CSS(SCSS)
12. Hamburger menu Transition to Close Button
See the Pen
Hamburger Menu Transition to Close Button by Colin (@colinhx)
on CodePen.
Author: Colin @colinhx
Links: Source Code / Demo
Created on: February 09, 2018
Made with: HTML, CSS(Sass), JS
13. A simple but interactive close button
See the Pen
A simple but interactive close button by Marius Nicula (@mariusgnicula)
on CodePen.
Author: Marius Nicula @mariusgnicula
Links: Source Code / Demo
Created on: March 30, 2017
Made with: HTML, CSS (SCSS)
14. Pure CSS cross / close button @mixin
See the Pen
Pure CSS cross / close button @mixin by Cyril Lamotte (@cyril-lamotte)
on CodePen.
Author: Cyril Lamotte @cyril-lamotte
Links: Source Code / Demo
Created on: May 15, 2020
Made with: HTML, CSS (SCSS)
15. Close button
See the Pen
Close button by Paraskevas Dinakis (@perry_nt)
on CodePen.
Author: Paraskevas Dinakis @perry_nt
Links: Source Code / Demo
Created on: February 12, 2016
Made with: HTML, CSS
16. Chat Bubble
See the Pen
Chat Bubble by Mikael Ainalem (@ainalem)
on CodePen.
Author: Mikael Ainalem @ainalem
Links: Source Code / Demo
Created on: April 09, 2020
Made with: HTML, CSS
17. Pure css close button
See the Pen
Pure css close button by Carson (@jediego)
on CodePen.
Author: Carson @jediego
Links: Source Code / Demo
Created on: May 19, 2016
Made with: HTML(Pug), CSS(Less)
18. animated close icon
See the Pen
animated close icon by ross s (@rsbear)
on CodePen.
Author: Ross s @rsbear
Links: Source Code / Demo
Created on: October 02, 2016
Made with: HTML, CSS (SCSS)
19. Close Button
See the Pen
Close Button by Saw-mon & Natalie (@sawmon_and_natalie)
on CodePen.
Author: Saw-mon & Natalie @sawmon_and_natalie
Links: Source Code / Demo
Created on: April 29, 2020
Made with: HTML(Pug), CSS (SCSS)
20. Open / Close button animation
See the Pen
Open / Close button animation by Jerome Renders (@JeromeRenders)
on CodePen.
Author: Jerome Renders @JeromeRenders
Links: Source Code / Demo
Created on: June 20, 2016
Made with: HTML (Pug), CSS (Sass), JS
21. Pure CSS close icon
See the Pen
Pure CSS close icon by ndeniche (@ndeniche)
on CodePen.
Author: Ndeniche @ndeniche
Links: Source Code / Demo
Created on: October 1, 2014
Made with: HTML, CSS(SCSS)
22. Line Menu Icon that Expands Into Actual Menu
See the Pen
Line Menu Icon that Expands Into Actual Menu by Chris Coyier (@chriscoyier)
on CodePen.
Author: Chris Choyier @chriscoyier
Links: Source Code / Demo
Created on: December 08, 2013
Made with: HTML, CSS(SCSS), JS
23. Simple close button animation
See the Pen
Simple Close Button Animation by Keith Chisholm (@keithchis)
on CodePen.
Author: Keith Chisholm @keithchis
Links: Source Code / Demo
Created on: October 14, 2015
Made with: HTML, CSS(SCSS)
24. Add and close toggle button
See the Pen
UI // Add & Close Toggle Button by Cosimo Scarpa (@coswise)
on CodePen.
Author: Cosimo Scarpa @coswise
Links: Source Code / Demo
Created on: April 05, 2021
Made with: HTML, CSS(SCSS), JS
25. Close Button & Dialog Animation
See the Pen
Information to Close Button & Dialog Animation by Daniel Villalba (@danielvillalba)
on CodePen.
Author: Daniel Villalba @danielvillalba
Links: Source Code / Demo
Created on: January 15, 2019
Made with: HTML, CSS(SCSS), JS
26. Close button with css and jquery
See the Pen
Close button with css and jquery by Salman Raza (@salraza1993)
on CodePen.
Author: Salman Raza @salraza1993
Links: Source Code / Demo
Created on: February 24, 2017
Made with: HTML, CSS, JS
27. close-button
See the Pen
close-button by eelke (@eelke)
on CodePen.
Author: Eelke @eelke
Links: Source Code / Demo
Created on: March 10, 2016
Made with: HTML(Pug),CSS (SCSS), Javascript