
A dialog box with flapping entrance animation with flapping buttons
Set up our HTML
Write the following simple HTML :
<div id="confirmNotifi" class="confirmNotifi"> <div class="content"> <div class="title"> <h2>Delete this file?</h2> This action is final and you won't be able to recover any data </div> <div class="yes">yes</div> <div class="no">No</div> </div> </div>
As dialog box is supposed to be drawn over page’s main content, it must be a fixed element. Write the following CSS code :
.confirmNotifi { background-color: rgba(0, 0, 0, 0.7); position: fixed; top: 0; bottom: 0; left: 0; right: 0; color: #000; text-align: center; font-size: large; font-family: "Arial Black", Gadget, sans-serif; }
Centering the content
.confirmNotifi .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Styling Title
.confirmNotifi .title{ background: hsl(0, 0%, 90%); padding: 50px; border-radius: 10px 10px 0 0; }
Remove extra padding from top :
.confirmNotifi .title h2{ margin-top: 0; }
Styling Buttons
Position buttons side by side :
.confirmNotifi .yes,.confirmNotifi .no{ width: 50%; float: left; }
Set colors and make round corners :
.confirmNotifi .yes,.confirmNotifi .no{ /*..*/ } .confirmNotifi .yes{ border-radius: 0 0 0 10px; background: hsl(120, 100%, 60%); } .confirmNotifi .no{ border-radius: 0 0 10px; background: hsl(0, 100%, 60%); }
Set padding :
.confirmNotifi .yes,.confirmNotifi .no{ /*..*/ padding: 20px; }
Oops. It’s because padding making the width of buttons more than 50%. Fix this as follows :
.confirmNotifi .yes,.confirmNotifi .no{ /*..*/ box-sizing: border-box; }
Set Shadow
.confirmNotifi .content > *{ box-shadow:4px 4px 16px rgba(0,0,0,0.3); }
Show dialog box on clicking button
Add a button to the page. On clicking it, it will show the dialog box. Add the following CSS, HTML and javascript :
.confirmNotifi { /*..*/ opacity: 0; visibility: hidden; transition: .3s; } .confirmNotifi.show { opacity: 1; visibility: visible; } /*..*/
<button onclick="showConfirmationNotification('confirmNotifi')"> Delete file </button> <!-- .. -->
function showConfirmationNotification(id) { document.getElementById(id).classList.add("show"); }
Hide dialog box on clicking anywhere :
<!-- add onclick method --> <div id="confirmNotifi" class="confirmNotifi" onclick="hideConfirmationNotification(this)"> <!-- .. --> </div>
function hideConfirmationNotification(x) { x.classList.remove("show"); }
Add flipping effect
/*..*/ .confirmNotifi .content{ /*..*/ transform: translate(-50%, -50%) rotateX(-90deg); transition: .3s; } .confirmNotifi.show .content{ transform: translate(-50%, -50%); } /*..*/
Make the flipping effect 3D :
.confirmNotifi { /*..*/ perspective: 100vh; } /*..*/
Add flapping effect
.confirmNotifi.show .content{ /*..*/ transition: .7s cubic-bezier(.7,.5,0,1.8); }
Make the buttons flappy too
/*..*/ .confirmNotifi .content{ /*..*/ perspective: 100vh; } /*..*/ .confirmNotifi .yes,.confirmNotifi .no{ /*..*/ transform:rotateX(90deg); transform-origin: 50% 0; transition: .3s; } /*..*/ .confirmNotifi.show .yes,.confirmNotifi.show .no{ transform:rotateX(0); } .confirmNotifi.show .yes{ transition: .7s .2s cubic-bezier(.7,.5,0,1.8); } .confirmNotifi.show .no{ transition: 1s .2s cubic-bezier(.7,.5,0,1.8); }
Transform buttons on hover
/*..*/ .confirmNotifi.show .yes:hover,.confirmNotifi.show .no:hover{ transform:rotateX(-25deg); transition: .3s; }
Make it good looking on mobile
/*..*/ @media (max-width: 600px){ .confirmNotifi .content{ width: 80%; } }
Whole code :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .confirmNotifi { background-color: rgba(0, 0, 0, 0.7); position: fixed; top: 0; bottom: 0; left: 0; right: 0; color: #000; text-align: center; font-size: large; font-family: "Arial Black", Gadget, sans-serif; opacity: 0; visibility: hidden; transition: .3s; perspective: 100vh; } .confirmNotifi.show { opacity: 1; visibility: visible; } .confirmNotifi .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateX(-90deg); transition: .3s; perspective: 100vh; } .confirmNotifi.show .content{ transform: translate(-50%, -50%); transition: .7s cubic-bezier(.7,.5,0,1.8); } .confirmNotifi .title{ background: hsl(0, 0%, 90%); padding: 50px; border-radius: 10px 10px 0 0; } .confirmNotifi .title h2{ margin-top: 0; } .confirmNotifi .yes,.confirmNotifi .no{ width: 50%; float: left; padding: 20px; box-sizing: border-box; transform:rotateX(90deg); transform-origin: 50% 0; transition: .3s; } .confirmNotifi .yes{ border-radius: 0 0 0 10px; background: hsl(120, 100%, 60%); } .confirmNotifi .no{ border-radius: 0 0 10px; background: hsl(0, 100%, 60%); } .confirmNotifi .content > *{ box-shadow:4px 4px 16px rgba(0,0,0,0.3); } .confirmNotifi.show .yes,.confirmNotifi.show .no{ transform:rotateX(0); } .confirmNotifi.show .yes{ transition: .7s .2s cubic-bezier(.7,.5,0,1.8); } .confirmNotifi.show .no{ transition: 1s .2s cubic-bezier(.7,.5,0,1.8); } .confirmNotifi.show .yes:hover,.confirmNotifi.show .no:hover{ transform:rotateX(-25deg); transition: .3s; } @media (max-width: 600px){ .confirmNotifi .content{ width: 80%; } } </style> </head> <body> <button onclick="showConfirmationNotification('confirmNotifi')"> Delete file </button> <div id="confirmNotifi" class="confirmNotifi" onclick="hideConfirmationNotification(this)"> <div class="content"> <div class="title"> <h2>Delete this file?</h2> This action is final and you won't be able to recover any data </div> <div class="yes" onclick="deleteSuccess()">Yes</div> <div class="no">No</div> </div> </div> <script> function showConfirmationNotification(id) { document.getElementById(id).classList.add("show"); } function hideConfirmationNotification(x) { x.classList.remove("show"); } function deleteSuccess() { /*what to do after clicking yes*/ } </script> </body> </html>
Code is also available here : https://codepen.io/zFunx/pen/xYyxzm. Useful links :