Home Web Design CSS Pure CSS Modal Box Card With HTML | Popup Modal Card

Pure CSS Modal Box Card With HTML | Popup Modal Card

August 29, 2019

14394

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.

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.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Pure CSS Modal Card | Webdevtrick.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
</head>
<body>

 <a href="#modal-opened" class="link-1" id="modal-closed">Open Modal</a>

<div class="container" id="modal-opened">
  <div class="modal">

    <div class="details">
      <h1 class="title">Your Title</h1>
      <p class="description">Slogan will be here at this place.</p>
    </div>

    <p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis ex dicta maiores libero minus obcaecati iste optio, eius labore repellendus.</p>

    <button class="btn">Button &rarr;</button>

    <a href="#modal-closed" class="link-2"></a>

  </div>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Pure CSS Modal Card | Webdevtrick.com</title>

</head>

<body>

<a href="#modal-opened" class="link-1" id="modal-closed">Open Modal</a>

<h1 class="title">Your Title</h1>

<p class="description">Slogan will be here at this place.</p>

</div>

<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis ex dicta maiores libero minus obcaecati iste optio, eius labore repellendus.</p>

<button class="btn">Button →</button>

</div>

</body>

</html>

style.css

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

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif;
  min-height: 100vh;
}
a,
a:link {
  font-family: inherit;
  text-decoration: none;
}
.container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.container:target {
  display: flex;
}
.modal {
  width: 60rem;
  padding: 4rem 2rem;
  border-radius: .8rem;
  color: hsl(0, 0%, 100%);
  background: linear-gradient(to right bottom, #009FFF, #ec2F4B);
  box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);
  position: relative;
  overflow: hidden;
}
.details {
  text-align: center;
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid hsla(0, 0%, 100%, .4);
}
.title {
  font-size: 3.2rem;
}
.description {
  margin-top: 2rem;
  font-size: 1.6rem;
  font-style: italic;
}
.txt {
  padding: 0 4rem;
  margin-bottom: 4rem;
  font-size: 1.6rem;
  line-height: 2;
}
.txt::before {
  content: '';
  position: absolute;
  top: 0%;
  left: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 18rem;
  height: 18rem;
  border: 1px solid hsla(0, 0%, 100%, .2);
  border-radius: 100rem;
  pointer-events: none;
}
.btn {
  padding: 1rem 1.6rem;
  border: 1px solid hsla(0, 0%, 100%, .4);
  border-radius: 100rem;
  color: inherit;
  background: transparent;
  font-size: 1.4rem;
  font-family: inherit;
  letter-spacing: .2rem;
  transition: .2s;
  cursor: pointer;
}
.btn:hover,
.btn:focus {
  border-color: hsla(0, 0%, 100%, .6);
  -webkit-transform: translateY(-.2rem);
          transform: translateY(-.2rem);
}
.link-1 {
  font-size: 1.8rem;
  color: hsl(0, 0%, 100%);
  background: linear-gradient(to right bottom, #009FFF, #ec2F4B);
  box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);
  border-radius: 100rem;
  padding: 1.4rem 3.2rem;
  transition: .2s;
}
.link-1:hover,
.link-1:focus {
  -webkit-transform: translateY(-.2rem);
          transform: translateY(-.2rem);
  box-shadow: 0 0 4.4rem .2rem hsla(236, 50%, 50%, 0.4);
}
.link-2 {
  width: 4rem;
  height: 4rem;
  border: 1px solid hsla(0, 0%, 100%, .4);
  border-radius: 100rem;
  color: inherit;
  font-size: 2.2rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;

  transition: .2s;
}
.link-2::before {
  content: '×';
  -webkit-transform: translateY(-.1rem);
          transform: translateY(-.1rem);
}
.link-2:hover,
.link-2:focus {
  border-color: hsla(0, 0%, 100%, .6);
  -webkit-transform: translateY(-.2rem);
          transform: translateY(-.2rem);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

*::after,

*::before {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

font-size: 62.5%;

}

body {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif;

min-height: 100vh;

}

a:link {

font-family: inherit;

text-decoration: none;

}

.container {

position: fixed;

top: 0;

left: 0;

z-index: 10;

display: none;

justify-content: center;

align-items: center;

width: 100%;

height: 100%;

}

.container:target {

display: flex;

}

.modal {

width: 60rem;

padding: 4rem 2rem;

border-radius: .8rem;

color: hsl(0, 0%, 100%);

background: linear-gradient(to right bottom, #009FFF, #ec2F4B);

box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);

position: relative;

overflow: hidden;

}

.details {

text-align: center;

margin-bottom: 4rem;

padding-bottom: 4rem;

border-bottom: 1px solid hsla(0, 0%, 100%, .4);

}

.title {

font-size: 3.2rem;

}

.description {

margin-top: 2rem;

font-size: 1.6rem;

font-style: italic;

}

.txt {

padding: 0 4rem;

margin-bottom: 4rem;

font-size: 1.6rem;

line-height: 2;

}

.txt::before {

content: '';

position: absolute;

top: 0%;

left: 100%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 18rem;

height: 18rem;

border: 1px solid hsla(0, 0%, 100%, .2);

border-radius: 100rem;

pointer-events: none;

}

.btn {

padding: 1rem 1.6rem;

border: 1px solid hsla(0, 0%, 100%, .4);

border-radius: 100rem;

color: inherit;

background: transparent;

font-size: 1.4rem;

font-family: inherit;

letter-spacing: .2rem;

transition: .2s;

cursor: pointer;

}

.btn:hover,

.btn:focus {

border-color: hsla(0, 0%, 100%, .6);

-webkit-transform: translateY(-.2rem);

transform: translateY(-.2rem);

}

.link-1 {

font-size: 1.8rem;

color: hsl(0, 0%, 100%);

background: linear-gradient(to right bottom, #009FFF, #ec2F4B);

box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);

border-radius: 100rem;

padding: 1.4rem 3.2rem;

transition: .2s;

}

.link-1:hover,

.link-1:focus {

-webkit-transform: translateY(-.2rem);

transform: translateY(-.2rem);

box-shadow: 0 0 4.4rem .2rem hsla(236, 50%, 50%, 0.4);

}

.link-2 {

width: 4rem;

height: 4rem;

border: 1px solid hsla(0, 0%, 100%, .4);

border-radius: 100rem;

color: inherit;

font-size: 2.2rem;

position: absolute;

top: 2rem;

right: 2rem;

display: flex;

justify-content: center;

align-items: center;

transition: .2s;

}

.link-2::before {

content: '×';

-webkit-transform: translateY(-.1rem);

transform: translateY(-.1rem);

}

.link-2:hover,

.link-2:focus {

border-color: hsla(0, 0%, 100%, .6);

-webkit-transform: translateY(-.2rem);

transform: translateY(-.2rem);

}

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

Ravinder Kumar August 30, 2019 At 10:44 am

Which piece of code is responsible for showing and hiding the modal?

Reply
Fred February 10, 2022 At 12:59 pm

How can I get the modal to open as a notification as soon as the page loads instead of needing to click a button?

Reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY

Preview Of Popup Modal Card

Pure CSS Modal Box Card With HTML Source Code

2 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

POPULAR CATEGORY