Close

Login Page with a Login Button Effect

This is an example of a login page with a hover effect on the Login button, designed using CSS, HTML, and Bootstrap framework 4. The background image, font, and the Bootstrap style packages have been imported to the code with their URLs. The login page is given a width of 360px. The login card is given a background color of #3d3d3d and a box-shadow style of 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24). The input text fields are given a style set of font-family as 'Open Sans', sans-serif, background color as #f2f2f2, and font-size as 14px. The 'Login' button is given the styles of font-size as 18px, text-transform style as uppercase to automatically convert the text to uppercase, background color of #e84c3d, font color as #FFFFFF, and cursor style as pointer to get the hand cursor effect on hover. The arrow icon on the button is given the placement of right as -20px, and opacity as 0. In a hover event, the right value gets changed to 0, and opacity changes to 1, to implement the hover effect. Source: https://bootsnipp.com/snippets/Ekde7

Post Comment or Questions

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

Your email address will not be published.

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.