Close

Log in/Sign up screen animation

This is another example of a signup/sign-in form where the sign in and signup options have been given using toggle buttons, designed using HTML, CSS, and JavaScript. The Li element of lists has been used to display the details in a list. The form consists of placeholders, checkboxes, and a button. JavaScript click(function() have been used to implement the toggle feature. The body of the form has the styles of box-sizing: border-box, font-family: 'Open Sans', sans-serif, and a background color of linear-gradient (rgba(246,247,249,0.8), rgba(246,247,249,0.8)). The background of the container is imported with its URL. The text-transform style is set as uppercase to convert the text to uppercase automatically. The sign in and sign-up sections have the styles color: rgba(255,255,255,.3), and cursor: pointer to display the cursor as a hand which takes a transition of all .25s ease in a toggle event and takes the border style of solid 2px #1059FF and padding-bottom of 10px. The sign in and signup buttons are given the styles of float: left, font-weight: 700, text-transform: uppercase, font-size: 13px, text-align: center, color: #ffffff, padding-top: 8px, height: 35px, border-radius: 20px, margin-top: 23px, and background-color: #1059FF. Source: https://codepen.io/joshsorosky/pen/gaaBoB

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.