Flapping Dialog Box

Flapping Dialog Box
A dialog box with flapping entrance animation with flapping buttons
GIF flapping dialog box

Set up our HTML

Write the following simple HTML :

simple html page

As dialog box is supposed to be drawn over page’s main content, it must be a fixed element. Write the following CSS code :

simple html page with background

Centering the content

content at center

Styling Title

title with background

Remove extra padding from top :

title with background

Styling Buttons

Position buttons side by side :

side to side buttons

Set colors and make round corners :

colored buttons

Set padding :

buttons with padding

Oops. It’s because padding making the width of buttons more than 50%. Fix this as follows :

dialog box

Set Shadow

dialog box with shadow

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 :

GIF show dialog box on action

Hide dialog box on clicking anywhere :

GIF show and hide dialog box

Add flipping effect

GIF dialog box with flat flipping effect

Make the flipping effect 3D :

GIF dialog box with 3D flipping effect

Add flapping effect

GIF dialog box with 3D flapping effect

Make the buttons flappy too

GIF dialog box with flapping button

Transform buttons on hover

GIF transform buttons on hover

Make it good looking on mobile

Whole code :

Code is also available here : https://codepen.io/zFunx/pen/xYyxzm. Useful links :