Learn the art of web development with our step-by-step tutorial on creating an animated login form using HTML and CSS. Elevate your UI design skills effortlessly!
Table of Contents
Welcome to our tutorial on creating an animated login form using HTML and CSS. In this guide, we'll walk you through the process, step by step, to enhance your web development and UI design skills.
Prerequisites:
Before we dive in, ensure you have a basic understanding of HTML and CSS. Familiarity with form elements will be beneficial.
Source Code
Step 1 (HTML Code):
To begin, set up the HTML structure for your login form. Create form elements such as input fields for username and password. Let's break down the code:
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used, in this case, HTML5.
2. <html lang="en">: The opening tag for the HTML document, specifying the language attribute as English.
3. <head>: This section contains meta-information about the HTML document, such as character set, viewport settings, and a link to an external stylesheet.
- <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which supports a wide range of characters.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: Provides information to Internet Explorer about the rendering engine to be used (in this case, the latest available).
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport properties for responsive design, ensuring the page adapts to different device screen sizes.
- <title>Animated Login Form</title>: Sets the title of the web page.
- <link rel="stylesheet" href="styles.css">: Links an external CSS (Cascading Style Sheets) file named "styles.css" to style the HTML elements.
4. <body>: The main content of the HTML document is placed inside the <body> tags.
- <div class="ring">: This div contains a set of <i> (icon) elements representing rings with different colors. The colors are defined using custom properties (--clr) in CSS.
- <div class="login">: Inside the "ring" div, there's another div for the login form. It includes a heading ("Login") and three input fields: one for the username, one for the password, and a submit button.
- Inside the login div, there's a set of <div> elements with the class "inputBx," each containing an <input> element. These represent the username and password input fields, and a submit button.
- <div class="links">: This div contains two hyperlinks for "Forget Password" and "Signup."
5. </body>: Closes the body section of the HTML document.
6. </html>: Closes the HTML document.
Step 2 (CSS Code):
Apply basic styling to your form using CSS. Define the layout, fonts, and colors to achieve a clean and visually appealing design. Let me break down the code for you:
1. @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");
- This line imports the Quicksand font with a weight of 300 from Google Fonts and sets it as the preferred font for the page.
2. * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Quicksand", sans-serif; }
- This block sets global styles for all elements, removing default margins and paddings, using the box model with border-box, and setting the default font to Quicksand or a generic sans-serif font.
3. body { ... }
- Styles for the body element, making it a flex container with center-aligned content. The background color is dark (#111), and the body will not show scrollbars (overflow: hidden).
4. .ring { ... }
- Styles for a container with a class of "ring," creating a circular shape. The rings have absolute positioning, a size of 500x500 pixels, and are centered within the container.
5. .ring i { ... }
- Styles for individual elements within the "ring" container. These elements have a circular border and are positioned absolutely to cover the entire container. They have a transition effect and are animated using keyframes.
6. .ring:hover i { ... }
- Styles applied when hovering over the "ring" container. The border of the inner elements is increased, and a drop shadow is added.
7. @keyframes animate { ... } and @keyframes animate2 { ... }
- Animation keyframes for the rotation of the inner elements in the "ring" container.
8. .login { ... }
- Styles for a login form, positioned absolutely, with a width of 300 pixels. It is centered vertically and horizontally, and it consists of a column layout with gaps between elements.
9. .login h2 { ... }, .login .inputBx { ... }, and related styles
- Styles for the login form's heading, input boxes, and submit button.
10. .login .links { ... }
- Styles for a section within the login form that contains links. It's a flex container with links styled in white and no text decoration.
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Quicksand", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #111;
width: 100%;
overflow: hidden;
}
.ring {
position: relative;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.ring i {
position: absolute;
inset: 0;
border: 2px solid #fff;
transition: 0.5s;
}
.ring i:nth-child(1) {
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
animation: animate 6s linear infinite;
}
.ring i:nth-child(2) {
border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
animation: animate 4s linear infinite;
}
.ring i:nth-child(3) {
border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
animation: animate2 10s linear infinite;
}
.ring:hover i {
border: 6px solid var(--clr);
filter: drop-shadow(0 0 20px var(--clr));
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.login {
position: absolute;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
}
.login h2 {
font-size: 2em;
color: #fff;
}
.login .inputBx {
position: relative;
width: 100%;
}
.login .inputBx input {
position: relative;
width: 100%;
padding: 12px 20px;
background: transparent;
border: 2px solid #fff;
border-radius: 40px;
font-size: 1.2em;
color: #fff;
box-shadow: none;
outline: none;
}
.login .inputBx input[type="submit"] {
width: 100%;
background: #0078ff;
background: linear-gradient(45deg, #ff357a, #fff172);
border: none;
cursor: pointer;
}
.login .inputBx input::placeholder {
color: rgba(255, 255, 255, 0.75);
}
.login .links {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.login .links a {
color: #fff;
text-decoration: none;
} Final Output:
Conclusion:
Congratulations! You've successfully created an animated login form using HTML and CSS. Apply your newfound skills to enhance other aspects of your web development projects.
Code by: Vincent Van Goggles
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
