Sign in Form with Circular Social Buttons

This is another stylish Sign-in form with circle shape social media buttons, designed using CSS, Html, and Bootstrap framework 4. The social media icons, font, CSS, and Bootstrap styles are imported to the code with their URLs. The body of the form is given the styles of font color as #434343, background color as #dfe7e9, and font-family style as 'Varela Round', sans-serif. The input text fields are given a font-size of 16px, and a border color of #5cb85c, to be activated on hover. The sign-in form is given a width of 400px, background color as #fff, and a box-shadow style as 0px 2px 2px rgba(0, 0, 0, 0.3). The title of the form is displayed with a font-size of 34px. The 'Sign in' button is created as a success type button and given the styles of border color as border-color: #5cb85c, font-size as 18px, font-weight as bold, and text-align as center. The 'Sign in' button changes its background color to #5cb85c, and the opacity value to 0.8, in a hover event. The social media buttons are given a border-radius as 50% to get the circle shape, and given three different background colors as #507cc0, #64ccf1, and #df4930. The buttons change their opacity to 0.8 on hover. Source:

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.