Collection of free HTML and CSS close button code examples

Browse a collection of free HTML and CSS close button code examples to create stylish and interactive close buttons for your website.

Pure CSS Cross/Close Button

Pure CSS Cross/Close Button

Author:
Cyril Lamotte | May 15, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Close Button

Close Button

Author:
Saw-mon & Natalie | April 29, 2020
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Chat Bubble Button

Author:
Mikael Ainalem | April 8, 2020
Made with:
HTML / CSS

About a code

Chat bubble to close animation.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Close Button

Close Button

Author:
Antonio Grosz | February 12, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Twitter Close Button Alternative

Twitter Close Button Alternative

Author:
Ana Tudor | November 2, 2019
Made with:
HTML / CSS (SCSS)

About a code

using <button> + pseudos (incl. :hover & :focus)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
CSS Close Button

CSS Close Button

Author:
merrybottle | August 22, 2018
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Close Animation

Close Animation

Author:
Maneesh | May 19, 2017
Made with:
HTML / CSS (SCSS)

About a code

A little close animation that's not a hamburger to close animation.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Interactive Close Button

Interactive Close Button

Author:
Marius Nicula | March 30, 2017
Made with:
HTML / CSS (SCSS)

About a code

A simple but interactive close button.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Animated Close Icon

Animated Close Icon

Author:
ross s | October 1, 2016
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Open / Close Button Animation

Open / Close Button Animation

Author:
Jerome Renders | June 20, 2016
Made with:
HTML (Pug) / CSS (Sass) / JavaScript

Compatible browsers:
Chrome, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Open / Close

Open / Close

Author:
Jonathan Blair | March 31, 2016
Made with:
HTML / CSS (SCSS) / JavaScript

About a code

Implementation of Dann Petty's "Open Close Icon Animation" https://dribbble.com/shots/1621359-Open-Close-Icon-Animation.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Back To Close

Back To Close

Author:
Stefano | February 21, 2016
Made with:
HTML / CSS / JavaScript

About a code

Inspired by "Back To Close" by sandeep virk https://dribbble.com/shots/1980182-Back-to-Close

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Close Button

Close Button

Author:
Paraskevas Ntinakis | February 12, 2016
Made with:
HTML / CSS

About a code

Simple close button in HTML and CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Pure CSS Close Buttons

Pure CSS Close Buttons

Author:
ndeniche | October 1, 2014
Made with:
HTML / CSS (SCSS)

About a code

Concept by Rubén Reyes. Feel free to play around with it, animate it, integrated with burger icons, etc.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Close Button

Close Button

Author:
Jermbo | August 11, 2014
Made with:
HTML / CSS (Less)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨