pure css modal box card

How we can create a popup card on button click using pure HTML and CSS? Solution: See this Pure CSS Modal Box Card With HTML, Popup Modal Card.

Previously I have shared a modal box with CSS and jquery, But this is with pure CSS. Basically, the modal box is a kind of popup or dialog type box which appears on click or other action. That kind of popup box is very important while we are designing a website or web application.

Today you will learn to create popup cards with the help of modal box. Basically, there is a button when you click on that, then a popup card appears. I think this will be useful for you on your website or any project. You can use this as a dialog box for showing short information or telling about something else.

So, Today I am sharing Pure CSS Modal Box Card With HTML. This modal box completely builds with pure CSS, even the open/close feature is without JavaScript. This modal box has a close button and good gradient background UI, you can customize according to your choice. You also can put a link or any action in the button.

If you are thinking now how this modal box card actually is, then see the preview given below.

Preview Of Popup Modal Card

See this video preview to getting an idea of how this design looks like.

Live Demo

Now you can see this visually, Also you can see it live by pressing the button above. If you like this, then get the source code of its.

You May Also Like:

Pure CSS Modal Box Card With HTML Source Code

Before sharing source code, let’s talk about it. First I have created a button to open the modal box, and put its id="model-closed" . Now I have created the modal box and its contents with id="modal-opened" , and also created a link for the close button. The whole concept is based on id and link targeting (info).

After that, I have placed ‘model-opened ‘ target on the first button, and ‘model-closed’ target on the close button. Now using CSS I have placed all the elements on right places and gave many values like color, position, transition, transform, etc. For creating the close buttons I have used x value in CSS content command.

That is the whole concept, left all other things you will understand after getting the codes I can’t explain all in writing. For creating this modal card you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

That’s It. Now you have successfully created Pure CSS Modal Box Card With HTML, Popup Modal Card. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here