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.
This is an example of a web sign-in form with social media logins, designed using HTML, CSS, and Bootstrap framework 4. The body of the form is given a background color of linear-gradient(to right, #0a346d, #1598ef). The sign-in card is given a box-shadow style of 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1), whereas the title of the sign-in card is displayed using the styles of margin-bottom as 2rem, font-weight as 300, and font-size as 1.5rem. The 'Sign in' button is created as a primary type button and given the styles of font-size as 80%, border-radius as 0rem, letter-spacing as .1rem, font-weight as bold, padding as 1rem, and transition as all 0.2s. The Google button is given a background color of #ea4335, while the Facebook button is given a background color of #3b5998. The text style for the buttons is set as uppercase to automatically transform the text to uppercase. The labels of the input text fields are displayed using a font color of #495057. The input text fields take a box-shadow effect of 10px 0px 0px 0px #ffffff, in a focus event.
This is an example of simple signup with social media web form, designed using CSS, HTML, and Bootstrap framework 4. The social media images are imported to the code with their URLs. The users are given the ability to sign up by clicking on the images, which are displayed in two rows. The body of the form is given a background color of RGB(0, 0, 0), and font color of #fff. The card container is given a margin-top as 200px, whereas the title of the form is given a font-size as calc(16px + 6 * ((100vw - 320px) / 680)). The images are given the styles of width as 250px, height as 150px, and border-radius as 7px. The second row of images is given a margin-top style as calc(18px + 6 * ((100vw - 320px) / 680)). Media quarries are also used to increase the responsiveness of the form.