Close

Neomorphic Signup/Login Form

This is an example of a simple neomorphic signup/login web form, with hover effects, designed using CSS, HTML, and Bootstrap framework 4. The colors used in the form are predefined as $color-red: #AE1100, $color-bg: #EBECF0, $color-shadow: #BABECC, and $color-white: #FFF. The form is given a background color of $color-bg. The body, p, input, select, text area, and button sections are given the styles of font-family as 'Montserrat', sans-serif, letter-spacing as -0.2px, and font-size as 16px. The button is given a font size and a padding of 16px, and a background color as $color-bg, and a text shadow as 1px 1px 0 $color-white. The input fields are given a box-shadow as inset 2px 2px 5px $color-shadow, inset -5px -5px 10px $color-white, and a transition value as all 0.2s ease-in-out. In a focus event, the box-shadow of the input fields turns to inset 1px 1px 2px $color-shadow, inset -1px -1px 2px $color-white. The button is given a cursor style as pointer to get the hand cursor effect, font-weight as 600, color as #61677C, transition as all 0.2s ease-in-out, and box-shadow as -5px -5px 20px $color-white, 5px 5px 20px $color-shadow, which changes to -2px -2px 5px $color-white, 2px 2px 5px $color-shadow, and inset 1px 1px 2px $color-shadow, inset -1px -1px 2px $color-white, in hover and active events, respectively. Source: https://codepen.io/swapnet/pen/QWwPVwE

Post Comment or Questions

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

Your email address will not be published.

Several Related Snippets

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