Social media icons with 3D Flips
This is an example of a set of social media buttons with a 3D flipping animation, designed using HTML, CSS, and Bootstrap framework 4. Media quarries are used to increase the responsiveness of the form. The form consists of five buttons named as Facebook, Instagram, YouTube, Whatsapp, and Pinterest. The buttons are given different background colors as #3b5998, #3f729b, #ff0000, #4dc247, and #cb2027. The body of the form is given a background color as #f7f6f6. The text on the buttons is given a font-size of 20px, and a font-weight style as bold. Each card is given a transform style as rotateY(180deg) to be active on hover, which rotates the buttons by 180 degrees and creates the flipping animation. The CSS styles have been given to both the front and back sides of the buttons, separately. The buttons are given a border value as 1px solid #eee, box-shadow style as 5px 6px 6px 2px #e9ecef, and the cursor style as pointer to get the hand cursor effect in a hover event.