Close

Google Style Login Form

This is an example of a Google style login form, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The profile image, Bootstrap and JavaScript styles are imported to the code with their URLs. The background of the form is given a linear gradient color as linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)). JavaScript methods have been used to load the profile and form details. The login card is given a style set of background-color as #F7F7F7, box-shadow as 0px 2px 2px rgba(0, 0, 0, 0.3), and border-radius as 2px. The profile image is given a height and a width of 96px, and the border-radius as 50% to get the circle shape. The input text fields take a border style of rgb(104, 145, 162), and a box-shadow style as inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162), in a focus event. The 'Sign in' button is created as a primary button and given a background color as rgb(104, 145, 162) and a font-size as 14px. The button changes its background color to rgb(12, 97, 33), in the active and hover modes. The 'Forgot password' link also changes its font color to rgb(12, 97, 33), in a hover event. Source: https://bootsnipp.com/snippets/a6Pdk

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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

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