pop up box css | css pop up box

 pop up box css | css pop up box

pop up box css | css pop up box


Welcome🎉 to codewithrandom blog in this blog we learn that how we create pop up box css | css pop up box . We use HTML & css  for this pop up box css | css pop up box.  Hope you enjoy our blog so let's start with a basic HTML structure for pop up box css | css pop up box.

HTML code 

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Pop Up Box</title>  
   <link rel="stylesheet" href="style.css">  
 </head>  
 <body>  
   <input type="checkbox" name="" id="btn" class="btn">  
   <div class="box">  
     <p>Hello World!</p>  
     <label for="btn">Close</label>  
   </div>  
 </body>  
 </html>  
There is all HTML code for notification css style. Now you can see output without css then we write css for our pop up box css | css pop up box .

pop up box css | css pop up box

CSS for pop up box css

 @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');  
 *{  
   margin: 0;  
   padding: 0;  
   box-sizing: border-box;  
   font-family: 'Poppins', sans-serif;  
 }  
 body{  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   height: 100vh;  
 }  
 .btn{  
   width: 120px;  
   height: 40px;  
   position: relative;  
   cursor: pointer;  
   appearance: none;  
   -webkit-appearance: none;  
 }  
 .btn::before{  
   content: 'OPEN';  
   position: absolute;  
   top: 0;  
   left: 0;  
   width: 100%;  
   height: 100%;  
   background: #2C394B;  
   border-radius: 10px;  
   color: white;  
   z-index: -20;  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   font-size: 1.22em;  
   box-shadow: 0px 6px #556b88;  
   transition: all .4s;  
 }  
 .btn:hover::before{  
   box-shadow: 0px 0px 30px #556b8883;  
 }  
 .box{  
   width: 350px;  
   height: 250px;  
   background: #2C394B;  
   color: white;  
   border-radius: 10px;  
   position: absolute;  
   clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   flex-direction: column;  
   transition: all .4s;  
 }   
 .btn:checked ~ .box{  
   clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);  
 }  
 .box p{  
   font-size: 1.5em;  
 }  
 .box label{  
   width: 120px;  
   height: 40px;  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   background: white;  
   color: black;  
   margin-top: 1em;  
   border-radius: 10px;  
   cursor: pointer;  
   box-shadow: 0px 6px #556b88;  
   transition: all .4s;  
 }  
 label:hover{  
   box-shadow: 0px 0px 30px #788daa83;  
 }  
Now we complete our css section,  Here is our updated output with css.

pop up box css | css pop up box

pop up box css | css pop up box


In this post, we learn how to create  pop up box css with simple coding of HTML & css . If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

project: by @coding_gyan_
written by - codewithrandom/Anki 

1 Comments

Post a Comment

Previous Post Next Post