In the ever-evolving world of web design, adding unique and engaging elements can significantly enhance user experience. One such element is an animated background login form. This guide will walk you through the process of creating an animated background login form using HTML and CSS. Initially, you will learn how to set up the basic structure of the form. Then, we will delve into the styling aspects, focusing on how to add captivating animations to the background. Consequently, you’ll discover how these animations can make your login form stand out and provide a more engaging user experience. By the end of this tutorial, you’ll have a stunning, animated background login form that not only looks impressive but also functions smoothly.
Objective of the project
The primary objectives of this guide are to:
- Understand the Basics: Learn the essential components needed to create a login form with HTML and CSS.
- Implement Animations: Explore CSS techniques to add dynamic and visually appealing animations to the form’s background.
- Enhance User Experience: Ensure that the animations enhance the overall user experience without compromising functionality.
- Integrate Seamlessly: Integrate animations seamlessly into your login form to create a visually striking and engaging user interface.
- Achieve a Polished Design: Design a login form that not only captures attention but also provides a smooth and interactive entry point for users.
Project Functionality
- Technology Use: HTML5, and CSS3
- External Resources: Remixicon, Google Fonts
- Responsive: Yes
Source Code & Live Demo
To use this project source code effectively:
- Source Code: You can obtain the complete source code by copying the code provided below.
- Download: You can download the source code by clicking the Source Code button below to get a ZIP file of the project. Extract the contents to your desired directory.
- Open the Project: Open the project folder using a text editor or an integrated development environment (IDE) like Visual Studio Code.
- Modify and Experiment: Customize the content, styles, and functionalities to suit your preferences. Experiment with different design elements to enhance your learning.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>login form with animated background</title>
<!-- remix icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.min.css"
/>
<!-- style sheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="rotate__div">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
<!-- ********** form ********** -->
<div class="form__container">
<div class="form__header">
<h3>Login into account</h3>
<p>Use your credentials to access your account.</p>
</div>
<!-- ********** toggle account ********** -->
<form class="form__body">
<div class="input__box">
<div class="input__list">
<input
type="text"
name="email"
id="email"
placeholder="email address"
/>
<i class="ri-mail-line"></i>
</div>
</div>
<div class="input__box">
<div class="input__list">
<input
type="password"
name="password"
id="password"
placeholder="password"
/>
<i class="ri-lock-2-line"></i>
</div>
</div>
<div class="remember__password">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox" />
<span>remember me</span>
</div>
<a href="#">forgot password!</a>
</div>
<button type="submit" class="submit__btn">login</button>
</form>
<!-- ********** social login ********** -->
<div class="social__account">
<span>or continue with</span>
<div class="social__btn">
<a href="#" class="social__btn" style="--btn-bg: #4867aa">facebook</a>
<a href="#" class="social__btn" style="--btn-bg: #33ccff">twitter</a>
<a href="#" class="social__btn" style="--btn-bg: #db4437">google</a>
</div>
</div>
</div>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
:root {
--font-rubik: "Rubik", sans-serif;
--font-opensans: "Open Sans", sans-serif;
--clr-success: #211297;
--clr-dark: #040404;
--clr-light-dark: #ced4da;
--clr-white: #ffffff;
--clr-gray: #535353;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: var(--font-opensans);
}
html {
height: 100%;
}
body {
position: relative;
min-height: 100vh;
width: 100%;
background: linear-gradient(132deg, #fc415a, #591bc5, #212335);
background-size: 400% 400%;
animation: Gradient 15s ease infinite;
overflow: hidden;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* ============ rotate div ============ */
.rotate__div .cube {
position: absolute;
width: 10px;
height: 10px;
border: 1px solid #d7d4e4;
transform-origin: top left;
transform: scale(0) rotate(0deg) translate(-50%, -50%);
animation: cube 10s ease-in forwards infinite;
}
.rotate__div .cube:nth-child(1) {
animation-delay: 0.5s;
left: 65vw;
top: 80vh;
}
.rotate__div .cube:nth-child(2) {
animation-delay: 2s;
left: 25vw;
top: 30vh;
}
.rotate__div .cube:nth-child(3) {
animation-delay: 4s;
left: 50vw;
top: 30vh;
}
.rotate__div .cube:nth-child(4) {
animation-delay: 6s;
left: 90vw;
top: 20vh;
}
.rotate__div .cube:nth-child(5) {
animation-delay: 8s;
left: 20vw;
top: 80vh;
}
/* ============ form container ============ */
.form__container {
position: relative;
width: max(320px, calc(100% - 35px));
margin-inline: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 25px;
background-color: rgba(225, 225, 225, 0.5);
border-radius: 10px;
padding: 80px 40px;
}
/* ========== form header ========== */
.form__header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.form__header h3 {
text-transform: uppercase;
font-weight: 800;
font-size: calc(1rem + 0.3vw);
color: var(--clr-dark);
}
.form__header p {
text-transform: capitalize;
color: var(--clr-dark);
font-size: 0.85rem;
font-weight: 200;
}
/* ========== form body ========== */
.form__body {
position: relative;
width: max(320px, calc(100% - 15px));
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
flex-direction: column;
padding: 15px;
}
.input__box {
position: relative;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
gap: 5px;
}
.input__list {
position: relative;
width: 100%;
height: 55px;
display: flex;
align-items: center;
}
.input__list input {
height: 100%;
width: 100%;
background-color: transparent;
border: 1px solid var(--clr-dark);
border-radius: 5px;
padding-inline: 15px;
color: var(--clr-dark);
font-size: 1rem;
}
.input__list input:focus {
outline: none;
}
.input__list input::placeholder {
text-transform: capitalize;
color: var(--clr-dark);
}
.input__list i {
position: absolute;
right: 15px;
color: var(--clr-dark);
font-size: 1.4rem;
}
.remember__password {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--clr-dark);
text-transform: capitalize;
}
.remember__password .checkbox {
display: flex;
align-items: center;
gap: 10px;
}
.remember__password .checkbox input{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 20px;
height: 20px;
border: 1px solid var(--clr-dark);
border-radius: 3px;
outline: none;
cursor: pointer;
}
.remember__password .checkbox input:checked {
background-color: #007BFF;
border: 1px solid #007BFF;
}
input[type="checkbox"]:checked::before {
content: "\2714";
display: block;
text-align: center;
color: white;
font-size: 15px;
}
.remember__password a {
color: var(--clr-dark);
}
.form__body button {
width: 100%;
padding-block: 15px;
border: none;
background-color: var(--clr-success);
border-radius: 5px;
text-wrap: nowrap;
text-transform: capitalize;
font-size: 1.15rem;
color: var(--clr-white);
cursor: pointer;
}
.social__account {
position: relative;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
gap: 20px;
}
.social__account span {
text-transform: capitalize;
color: var(--clr-dark);
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
color: var(--clr-dark);
font-size: 0.85rem;
}
.social__account span::before {
content: "";
width: 100px;
height: 1px;
background-color: var(--clr-dark);
}
.social__account span::after {
content: "";
width: 100px;
height: 1px;
background-color: var(--clr-dark);
}
.social__btn {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.social__btn a {
padding: 10px 20px;
background-color: var(--btn-bg);
border-radius: 5px;
color: var(--clr-white);
text-transform: capitalize;
}
/* ============ background animation effect ============ */
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes cube {
0% {
transform: scale(0) rotate(0deg) translate(-50%, -50%);
opacity: 1;
}
100% {
transform: scale(20) rotate(960deg) translate(-50%, -50%);
opacity: 0;
}
}
/* ============ responsive design in media query ============ */
@media (min-width: 640px) {
.form__container {
width: 75%;
}
}
@media (min-width: 767px) {
.form__container {
width: 60%;
}
}
@media (min-width: 1024px) {
.form__container {
width: 50%;
}
}
@media (min-width: 1280px) {
.form__container {
width: 40%;
}
}
@media (min-width: 1534px) {
.form__container {
width: 33%;
}
}Code & Preview
See the Pen animated background login form html, css by Mamun Hossain (@Mamun-Hossain-the-bold) on CodePen.
Download Code & Demo
you can download the source code files for free by clicking the Source Code button. Additionally, you can edit and view a live demo by clicking the Edit With Codepen button below.
