Close button icon css

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

2. A Simple But Interactive CSS Close Button

3. CSS Close Animation

4. Animated Close Icon

5. Open / Close Arrow

Implementation of Dann Petty’s open close animation. https://dribbble.com/shots/1621359-Open-Close-Icon-Animation

6. Open / Close Button Animation

7. Close Button — CSS

8. Back To Close By STE

9. 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 😛

10. Pure CSS Close Icon

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

11. Close Buttons :Hover :Focus And :Active

12. Open And Close Button With Animation

13. CSS Close Button

14. Hover Animated Close Button

15. 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 😛

16. 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.

17. Three Dots To Close Button

18. Bootstrap Close Button

19. 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.

20. 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.

Источник

30 CSS Close Button Examples

A collection of the top free HTML and CSS close buttons. Each of these CSS close button code examples contains unique visual designs, effects, animations, and code that make them ideal for implementation in various app and web development applications.

Title:

Add and close toggle button

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful CSS close button created using HTML, SCSS, and jQuery. When you click on the button, it will toggle the state between two icons with a nice animation effect it will convert the icon into a dot and at the end cross icon.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, animated close button with a spinning animation effect on the icon is created using HTML and CSS(Less). When you hover over the button, it will make a cross icon to a simple horizontal line with a quick animation effect.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic, close button on the black background with hover effects is created using pure HTML and CSS. When you hover over the button, it will convert the cross icon into the back button, with a nice fade-in effect for the text and animation effect for lines.

Title:

Responsive bodymovin modal

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An awesome, responsive close button is created using HTML, CSS, and JavaScript. When you click on the button, it will show the shrinking body effect to look like a fluid motion.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful hamburger animation with a CSS close button created using HTML, SCSS, and JavaScript. When you click on the button, it will convert the hamburger menu into a close button with amazing animation effects for lines.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, close button is created using pure HTML and CSS. When you hover over the button, it will make the background color transparent orange with a nice fade-in effect, and also spin animation effects are given for the cross icon.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful CSS close button morphed from an icon created using HTML, SCSS, and jQuery. When you click on the icon, it will toggle into a close button with smooth animations.

Title:

Hamburger menu to close button

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, hamburger menu to CSS close button created using HTML, Sass, and JavaScript. When you click on the button, it will toggle the state between both icons with quick transition effects given for lines that look amazing.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic, three dots gets converted to a CSS close button with an amazing animation. It is created using HTML, SCSS, and jQuery. When you click on the button, it will toggle the state between three dots and close button with an awesome animation effect given for the lines.

Title:

Line Menu Icon that Expands Into Actual Menu

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, simple CSS close button created using HTML, SCSS and Javascript. When you click the menu button a pop-up opens up with a beautiful animation and a cool close button.

Title:

Click and hold close button

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A stylish, modern close button is created using HTML, CSS, and jQuery. When you click and hold the button, it will fill the border with a white color to indicate the process with a smooth transition. When you hover over the button, it’s color slightly changes to give a highlighting effect.

Title:

1 hour tasks(Responsive ReactJS app)

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

This amazing CSS close button is built to provide amazing contrast in relation to the opened window. Created with HTML and CSS, this one looks beautiful.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, close button created with SCSS and Javascript. Triggers a cool animation on click and button release.

Title:

Open close button animation

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, classic hamburger CSS close button created using HTML(Pug), Sass, and Javascript. When you hover over the close button, it will change to the dark icon color. When you click on the button, it will toggle the state between hamburger and cross icon with amazing animation.

Title:

Simple close button animation

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An beautiful yet simple CSS close button created using HTML and Sass. When you hover over the button, it will spin the cross icon in the button with a smooth transition effect along with changing the color. Button shadows are also given to give a decent look to the web page.

Title:

Close button with gradient background

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, simple CSS close button is created using HTML and Sass. When you hover over the button, it will animate the cross icon in the button with a smooth transition. Button looks amazing with the gradient background.

Title:

Hover Icons[mac os-min,max,close]

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

Super fun, sleek-looking Mac Os style CSS close button with an icon hover effect to make it more user-friendly. Created using HTML and CSS which makes it super easy to implement.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A decorous CSS close button created using HTML, SCSS, and Javascript. When you click on the button, it will toggle the state between icon. It will change the icon to cross with nice animation and also change the background with a nice fade-in effect.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful CSS close button with dialog animation is created using HTML, SCSS, and Javascript. When you click on the button, it will show the dialog with a nice fade-in effect and also change the button icon to cross with nice animations. When you hover over the information icon, its color changes to light blue with a cool animations.

Источник

How to Create a Close Button in HTML CSS[With Examples]

Close buttons also called cancel buttons can be used to dismiss items on a website like menus, modals, and popups.

1. Close Button CSS 1: Times

You can make a close button using the times( × ) symbol.

2. Close Button CSS 2: Plus

You can also create a close button using the plus( + ) symbol.

You will need to rotate the plus sign so that it looks like a cancel button.

3. Close Button CSS 3

You can also use an SVG image of a cancel button for your close button.

4. Close Button CSS 4

You can also build a close button bulma style.

.navbar-burger < cursor: pointer; display: block; height: 3.25rem; position: relative; width: 3.25rem; >.navbar-burger span < background-color: currentColor; display: block; height: 1px; left: calc(50% - 8px); position: absolute; transform-origin: center; transition-duration: 86ms; transition-property: background-color,opacity,transform; transition-timing-function: ease-out; width: 16px; >.navbar-burger span:nth-child(1) < top: calc(50% - 6px); >.navbar-burger span:nth-child(2) < top: calc(50% - 1px); display: none; >.navbar-burger span:nth-child(3) < top: calc(50% + 4px); >.navbar-burger span:nth-child(1) < transform: translateY(5px) rotate(45deg); >.navbar-burger span:nth-child(3)

5. Close Button CSS 5: Before and After

You can also create a close button using Pseudo elements in CSS.

.close < position: absolute; right: 32px; top: 32px; width: 32px; height: 32px; opacity: 0.7; >.close:hover < opacity: 1; >.close:before, .close:after < position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #333; >.close:before < transform: rotate(45deg); >.close:after

6. Bootstrap Close Button

You can also create a close button on your website using Bootstrap.

Remember to import Bootstrap to your website before attempting to add the button.

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Front End Developer Newsletter

Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.

Start understanding the whole web development field now

Stop all the confusion and start understanding how all the pieces of web development fit together.

Never any spam, easily unsubscribe any time.

About

If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.

Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.

You can also use the HTML and CSS projects list as a source of projects to build as you learn HTML, CSS and JavaScript.

Recent Posts

Источник