Close

Registration Form with Hover Effects

This is an example of a simple registration form with focus effects, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The JavaScript methods have been used to implement the focus effects. The body of the form is given a background color as #C5E1A5. The form is given the styles of width as 60%, background as #efefef, text-align as center, and box-shadow as 2px 2px 3px rgba(0,0,0,0.1). The input text field labels are given the styles of font-family as sans-serif, font-size as .8em, letter-spacing as 1px, font color as RGB(120,120,120), transition as ease .3s. The text field line has the styles of width as 100%, height as 2px, and background color as #BCBCBC. In a focus event, the line takes the background color of #8BC34A, with a transform effect of translateX(-50%), whereas the label changes its top value to -3em, to move upwards. The 'Submit' button is given a background color as RGB(120,120,120), which gets changed to #8BC34A, in a hover event. Source: https://bootsnipp.com/snippets/or3WG

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.