popup with button in html | Popup Button Using Pure HTML and CSS?
.png "popup with button in html | Popup Button Using Pure HTML and CSS?")
Welcome to today’s tutorial. Today we are going to create popup with button in HTML and CSS. For this, we are going to use HTML, and CSS .
You need basic knowledge of CSS for this project. This tutorial is well suited for CSS Beginners. Let us get started with the project.
We can make this project with the help of HTML, CSS and JavaScript also. But today we are targeting on the. Developers for who knew only the HTML and CSS.
So today we are going to make this project only by using HTML and CSS.
Hello Learners,
First, I created a button. When you click on button then the popup will appear. Then I created some divs for add text and images.
I put an image URL on the div, not store image offline in the device. I had put one ID and use class on divs left.
LIVE SERVER:-
Before moving forward to the code first of all we will see the live sever of the code so you can see how it is working on clicking the button.
See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.
HTML:-
HTML is the layout of the website.
We have inserted a class named container and anchor tag in which we have given a link of pop-up ID. The anchor tag is used as a button to click. When we click on the button then the webpage will show the popup. So for now as HTML we are not using CSS so the content of the pop-up will also. Shown in the HTML. As soon as you will write the CSS file pop-up file will be hidden.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<a class="button" href="#popup">Click Here For PopUp</a>
<div class="popup" id="popup">
<div class="popup-inner">
<div class="popupphoto">
<img src="https://images.unsplash.com/photo-1648716181127-d4654581cc26?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="">
</div>
<div class="popuptext">
<h1>Pure CSS Pop-Up with button</h1>
<p>LorEM Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam phasellus vestibulum lorem sed risus. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Nibh venenatis cras sed felis eget. Enim nunc faucibus a pellentesque. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Elementum pulvinar etiam non quam. At imperdiet dui accumsan sit amet nulla. Interdum velit euismod in pellentesque. Dictumst quisque sagittis purus sit amet volutpat. Metus dictum at tempor commodo. Ut porttitor leo a diam sollicitudin tempor. Bibendum ut tristique et </p>
</div>
<a class="closepopup" href="#">X</a>
</div>
</div>
</div>
</body>
</html>
CSS:-
CSS stands for cascading Style sheet. It is used for styling the basic layout / HTML file of any web page. Here in this project we are using some basic CSS properties. First you should try to learn it. Then you can apply it easily with the help of this blog.
- The
box-shadowproperty attaches one or more shadows to an element. - We are using the target pseudo class.
- We are using the flex box property of CSS That will align all the elements in horizontal line which are inside the container on which Flex box property is applied.
- When we want to show a content above another content Or over another content or behind another content. Then we use the Z-index property. The container whose Z-index value is more will be shown above and whose index value is low as shown behind.
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600&subset=latin-ext");
* {
box-sizing: border-box;
}
html, body {
font-family: 'Raleway', sans-serif;
font-size: 16px;
}
@media screen and (max-width: 768px) {
html, body {
font-size: 12px;
}
}
.container {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.button {
text-decoration: none;
font-size: .875rem;
text-transform: uppercase;
display: inline-block;
border-radius: 1.5rem;
background-color: #fff;
color:black;
padding: 1rem 2rem;
font-weight: 900;
}
.popup {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100vw;
height: 100vh;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 2;
visibility: hidden;
opacity: 0;
overflow: hiden;
transition: .64s ease-in-out;
}
.popup-inner {
position: relative;
bottom: -100vw;
right: -100vh;
display: flex;
align-items: center;
max-width: 800px;
max-height: 600px;
width: 60%;
height: 80%;
background-color: #fff;
transform: rotate(32deg);
transition: .64s ease-in-out;
}
.popupphoto {
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 40%;
height: 100%;
overflow: hidden;
}
.popupphoto img {
width: auto;
height: 100%;
}
.popuptext {
display: flex;
flex-direction: column;
justify-content: center;
width: 60%;
height: 100%;
padding: 4rem;
}
.popuptext h1 {
font-size: 2rem;
font-weight: 600;
margin-bottom: 2rem;
text-transform: uppercase;
color: #0A0A0A;
}
.popuptext p {
font-size: .875rem;
color: #686868;
line-height: 1.5;
}
.popuptext a {
text-decoration: none;
color: #47BDFF;
}
.popup:target {
visibility: visible;
opacity: 1;
}
.popup:target .popup-inner {
bottom: 0;
right: 0;
transform: rotate(0);
}
.closepopup {
position: absolute;
right: -1rem;
top: -1rem;
width: 3rem;
height: 3rem;
font-size: .875rem;
font-weight: 300;
border-radius: 100%;
background-color: #47BDFF;
z-index: 4;
color: #fff;
line-height: 3rem;
text-align: center;
cursor: pointer;
text-decoration: none;
}
I hope hoped loved this blog and learnt many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us motivation to create more blogs.
If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.
You can follow me on Instagram.
Written by @Himanshu Singh.
