Html css open close

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.

Источник

How TO — CSS/JS Modal

Learn how to create a Modal Box with CSS and JavaScript.

How To Create a Modal Box

A modal is a dialog box/popup window that is displayed on top of the current page:

Modal Header

Step 1) Add HTML:

Example

class=»modal» is a container element for the modal and the div with class=»modal-content» is where you put your modal content (headings, paragraphs, images, etc).

The element with class=»close» should be used to close the modal.

Step 2) Add CSS:

Example

/* The Modal (background) */
.modal display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
>

/* Modal Content/Box */
.modal-content background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
>

/* The Close Button */
.close color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
>

.close:hover,
.close:focus color: black;
text-decoration: none;
cursor: pointer;
>

The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.

Add a black background color with opacity.

Set position to fixed; meaning it will move up and down the page when the user scrolls.

It is hidden by default, and should be shown with a click of a button (we’ll cover this later).

The .modal-content class

This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).

We also set the width to 400px — this could be more or less, depending on screen size. We will cover this later.

The .close class

The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.

Step 3) Add JavaScript:

Example

// Get the modal
var modal = document.getElementById(«myModal»);

// Get the button that opens the modal
var btn = document.getElementById(«myBtn»);

// Get the element that closes the modal
var span = document.getElementsByClassName(«close»)[0];

// When the user clicks on the button, open the modal
btn.onclick = function() modal.style.display = «block»;
>

// When the user clicks on (x), close the modal
span.onclick = function() modal.style.display = «none»;
>

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) if (event.target == modal) modal.style.display = «none»;
>
>

Add Header and Footer

Add a class for modal-header, modal-body and modal-footer:

Example

Style the modal header, body and footer, and add animation (slide in the modal):

Example

/* Modal Header */
.modal-header padding: 2px 16px;
background-color: #5cb85c;
color: white;
>

/* Modal Footer */
.modal-footer padding: 2px 16px;
background-color: #5cb85c;
color: white;
>

/* Modal Content */
.modal-content position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
animation-name: animatetop;
animation-duration: 0.4s
>

Bottom Modal («Bottom sheets»)

An example on how to create a full-width modal that slides in from the bottom:

Example

Tip: Also check out Modal Images and Lightbox.

Источник

Top 10 CSS Close Buttons [ Best CSS Close icon ]

Hello Friends, In this article I have listed Top 10 CSS Close Button code examples which are available on CodePen.

Best collection of Close Button

In this collection, I have listed Top 10 CSS Close Button. Check out these Awesome Button Design like: #1 Twitter Style close button, #2 Pure CSS cross / close button, #3 Simple Glowing Close Button, and many more.

#1 Twitter Style close button

Twitter Style close button, which was developed by Ana Tudor. Moreover, you can customize it according to your wish and need.

Author:	Ana Tudor
Created on:	November 2, 2019
Made with:	HTML & CSS(SCSS)
Demo Link:	Source Code / Demo
Tags:	Twitter Style close button

#2 Pure CSS Close button

Pure CSS cross button, which was developed by Cyril Lamotte. Moreover, you can customize it according to your wish and need.

Author:	Cyril Lamotte
Created on:	May 15, 2020
Made with:	HTML & CSS(SCSS)
Demo Link:	Source Code / Demo
Tags:	Pure CSS cross button

#3 Simple Glowing Close Button

Simple Glowing Close Button, which was developed by Antonio Grosz. Moreover, you can customize it according to your wish and need.

Author:	Antonio Grosz
Created on:	February 12, 2020
Made with:	HTML & CSS(SCSS)
Demo Link:	Source Code / Demo
Tags:	Glowing Close Button

#4 Close button With Hover Effect

Close icon With Hover Effect, which was developed by Maneesh. Moreover, you can customize it according to your wish and need.

Author:	Maneesh
Created on:	May 19, 2017
Made with:	HTML & CSS(SCSS)
Demo Link:	Source Code / Demo
Tags:	Close icon With Hover Effect

#5 Awesome CSS Close Button

Awesome Close Button, which was developed by Marius Nicula. Moreover, you can customize it according to your wish and need.

Author:	Marius Nicula
Created on:	March 30, 2017
Made with:	HTML & CSS(SCSS)
Demo Link:	Source Code / Demo
Tags:	Awesome Close Button

#6 Pure CSS close icon

Pure CSS close icon, which was developed by ndeniche. Moreover you can customize it according to your wish and need.

Author:	ndeniche
Created on:	October 1, 2014
Made with:	HTML & CSS(SCSS)
Demo Link:	Source Code / Demo
Tags:	Pure CSS close icon

#7 Animated Close icon

Animated Close icon, which was developed by ross s. Moreover you can customize it according to your wish and need.

Author:	ross s
Created on:	October 2, 2016
Made with:	HTML & CSS(SCSS)
Demo Link:	Source Code / Demo
Tags:	Animated Close icon

#8 Back To Close button

Back To Close button, which was developed by Stefano. Moreover you can customize it according to your wish and need.

Author:	Stefano
Created on:	February 21, 2016
Made with:	HTML, CSS & JS
Demo Link:	Source Code / Demo
Tags:	Back To Close button

#9 Open / Close Button

Open / Close Button, which was developed by Jonathan Blair. Moreover you can customize it according to your wish and need.

Author:	Jonathan Blair
Created on:	April 1, 2016
Made with:	HTML, CSS(SCSS) & JS
Demo Link:	Source Code / Demo
Tags:	Open Close Button

#10 Burger Menu / Close icon button animation

Burger Menu / Close icon button animation, which was developed by Marius. Moreover you can customize it according to your wish and need.

Author:	Marius
Created on:	October 2, 2014
Made with:	HTML, CSS & JS
Demo Link:	Source Code / Demo
Tags:	Burger Menu Close button

Источник