Home Web Design HTML Animated Login Page In HTML CSS | Example and Source Code

Animated Login Page In HTML CSS | Example and Source Code

August 7, 2019

36646

How we can create an animated login page design using HTML and CSS? Solution: Animated Login Page In HTML CSS, Example and Source Code.

Previous I have shared many login forms, but this time is for the whole page design. If any website has membership or user feature, then they probably have a separate login page. Mostly other useful links like sign up, forgot passwords, etc page’s direction available on the login page. If you have a login page or planning to create then you take inspiration from this post.

Today you will learn to create a login page with image and animation using pure HTML & CSS. There is an image, a form, and some texts, they all have an animation effect. You can modify it according to your requirement. I know this is simple work, but one of my visitors asks me for creating this.

So, Today I am sharing Animated Login Page In HTML CSS. I have used pure CSS for creating all the animation effects, delay, etc. You can switch the position of form and image very easily, you just have to change values or change the class name. The image I have used in this design is very large in size, maybe you have to wait sometime see live.

If you are thinking now how this animated login page actually is, then see the preview given below.

Preview Of The Page Design

See this video preview to getting an idea of how this design looks like.

Live Demo

Now you can see this visually, also there is a button above for live view and test. If you like this, then get the source code of its.

Animated Login Page In HTML CSS Source Code

Before sharing source code, let’s talk about it. Simply I have created the main div with class name ‘container‘. After that, I have places headings, form, image, etc. In all elements, I have put an extra class for animation-delay. In animation-delay, I have just increased the time step by step. Like if the first class has 2s of animation delay, then the second one has 2.1s.

As you can see the animation in the preview, for creating this I have used CSS animation-delay and @keyframe (info) properties. All the things are ver basics part of HTML and CSS. There is nothing special to explain, You will understand easily after getting the codes.

For creating this page design you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Animated Login Page | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
  <div class="left-section">
    <div class="header">
      <h1 class="animation a1">Welcome Back!</h1>
      <h4 class="animation a2">Log in for entering your membership dashboard.</h4>
    </div>
    <div class="form">
      <input type="email" class="form-field animation a3" placeholder="Username">
      <input type="password" class="form-field animation a4" placeholder="Password">
      <p class="animation a5"><a href="#">Forgot Password</a></p>
      <button class="animation a6">LOGIN</button>
    </div>
  </div>
  <div class="right-section"></div>
</div>
  
</body>
</html>

<!DOCTYPE html>

<head>

<title>Animated Login Page | Webdevtrick.com</title>

</head>

<body>

<h1 class="animation a1">Welcome Back!</h1>

<h4 class="animation a2">Log in for entering your membership dashboard.</h4>

</div>

<p class="animation a5"><a href="#">Forgot Password</a></p>

<button class="animation a6">LOGIN</button>

</div>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
* {
  box-sizing: border-box;
}
body {
  font-family: 'Rubik', sans-serif;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  height: 100vh;
}
.left-section {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  -webkit-animation-name: left-section;
          animation-name: left-section;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.right-section {
  flex: 1;
  background: linear-gradient(to right, #f50629 0%, #fd9d08 100%);
  transition: 1s;
  background-image: url(https://webdevtrick.com/wp-content/uploads/login-page-image.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.header > h1 {
  margin: 0;
  color: #f50629;
}
.header > h4 {
  margin-top: 10px;
  font-weight: normal;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.4);
}
.form {
  max-width: 80%;
  display: flex;
  flex-direction: column;
}
.form > p {
  text-align: right;
}
.form > p > a {
  color: #000;
  font-size: 14px;
}
.form-field {
  height: 46px;
  padding: 0 16px;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-family: 'Rubik', sans-serif;
  outline: 0;
  transition: .2s;
  margin-top: 20px;
}
.form-field:focus {
  border-color: #0f7ef1;
}
.form > button {
  padding: 12px 10px;
  border: 0;
  background: linear-gradient(to right, #f50629 0%, #fd9d08 100%);
  border-radius: 3px;
  margin-top: 10px;
  color: #fff;
  letter-spacing: 1px;
  font-family: 'Rubik', sans-serif;
}
.animation {
  -webkit-animation-name: move;
          animation-name: move;
  -webkit-animation-duration: .4s;
          animation-duration: .4s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.a1 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.a2 {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}
.a3 {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}
.a4 {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}
.a5 {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}
.a6 {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
@keyframes move {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes left-section {
  0% {
    opacity: 0;
    width: 0;
  }
  100% {
    opacity: 1;
    padding: 20px 40px;
    width: 440px;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

/** Code By Webdevtrick ( https://webdevtrick.com ) **/

* {

box-sizing: border-box;

}

body {

font-family: 'Rubik', sans-serif;

margin: 0;

padding: 0;

}

.container {

display: flex;

height: 100vh;

}

.left-section {

overflow: hidden;

display: flex;

flex-wrap: wrap;

flex-direction: column;

justify-content: center;

-webkit-animation-name: left-section;

animation-name: left-section;

-webkit-animation-duration: 1s;

animation-duration: 1s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

.right-section {

flex: 1;

background: linear-gradient(to right, #f50629 0%, #fd9d08 100%);

transition: 1s;

background-image: url(https://webdevtrick.com/wp-content/uploads/login-page-image.jpg);

background-size: cover;

background-repeat: no-repeat;

background-position: center;

}

.header > h1 {

margin: 0;

color: #f50629;

}

.header > h4 {

margin-top: 10px;

font-weight: normal;

font-size: 15px;

color: rgba(0, 0, 0, 0.4);

}

.form {

max-width: 80%;

display: flex;

flex-direction: column;

}

.form > p {

text-align: right;

}

.form > p > a {

color: #000;

font-size: 14px;

}

.form-field {

height: 46px;

padding: 0 16px;

border: 2px solid #ddd;

border-radius: 4px;

font-family: 'Rubik', sans-serif;

outline: 0;

transition: .2s;

margin-top: 20px;

}

.form-field:focus {

border-color: #0f7ef1;

}

.form > button {

padding: 12px 10px;

border: 0;

background: linear-gradient(to right, #f50629 0%, #fd9d08 100%);

border-radius: 3px;

margin-top: 10px;

color: #fff;

letter-spacing: 1px;

font-family: 'Rubik', sans-serif;

}

.animation {

-webkit-animation-name: move;

animation-name: move;

-webkit-animation-duration: .4s;

animation-duration: .4s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

-webkit-animation-delay: 2s;

animation-delay: 2s;

}

.a1 {

-webkit-animation-delay: 2s;

animation-delay: 2s;

}

.a2 {

-webkit-animation-delay: 2.1s;

animation-delay: 2.1s;

}

.a3 {

-webkit-animation-delay: 2.2s;

animation-delay: 2.2s;

}

.a4 {

-webkit-animation-delay: 2.3s;

animation-delay: 2.3s;

}

.a5 {

-webkit-animation-delay: 2.4s;

animation-delay: 2.4s;

}

.a6 {

-webkit-animation-delay: 2.5s;

animation-delay: 2.5s;

}

@keyframes move {

0% {

opacity: 0;

visibility: hidden;

-webkit-transform: translateY(-40px);

transform: translateY(-40px);

}

100% {

opacity: 1;

visibility: visible;

-webkit-transform: translateY(0);

transform: translateY(0);

}

@keyframes left-section {

0% {

opacity: 0;

width: 0;

}

100% {

opacity: 1;

padding: 20px 40px;

width: 440px;

}

That’s It. Now you have successfully created Animated Login Page In HTML CSS Example and Source Code. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

27 COMMENTS

Pradyut August 8, 2019 At 4:20 pm

It doesn’t work properly for mobile,while pressing on username input the screen magnifies but loses focus from main credentials part which is bad

Reply
- shaan August 8, 2019 At 4:29 pm
  
  This is not responsive, If you want I can create it responsive
  
  Reply
  - Tamer Moalla August 28, 2019 At 8:35 am
    
    Hello Shaan,
    
    Would you please share the responsive version?
    
    Thanks in advance…
    
    Reply
    - shaan August 28, 2019 At 8:35 am
      
      Sure I will post soon.
      
      Reply
Debangsu Nandy August 10, 2019 At 4:34 pm

Please post the code for responsive login form.

Reply
Madan August 13, 2019 At 5:57 am

Hi ,
I swapped the left-section and right section but it is not working.
Please let me know the changes if I want to show login column at the right side.

Reply
Madan August 14, 2019 At 7:07 am

Hi,
This is giving issue in IE 10 and below.
PLease let me know what is the fix.

Reply
- shaan August 14, 2019 At 7:49 am
  
  use -ms- before css properties
  
  Reply
  - Madan August 16, 2019 At 4:38 am
    
    not working…
    
    Reply
alice February 5, 2021 At 11:47 am

how to change the image?

Reply
Mb March 18, 2021 At 5:26 am

Love this login form…I also love this Login Form

Reply
Animated Login Form - Login Portal April 21, 2021 At 12:30 am

[…] Animated Login Page In HTML CSS Example and Source Code […]

Reply
Animated Login Form In Bootstrap - Login Portal April 21, 2021 At 8:11 am

[…] Animated Login Page In HTML CSS Example and Source Code […]

Reply
Animated Login Images - Login Portal May 12, 2021 At 9:00 pm

[…] Animated Login Page In HTML CSS Example and Source Code […]

Reply
Animated Login Form With Jquery & Css3 - Login Portal May 13, 2021 At 6:01 pm

[…] Animated Login Page In HTML CSS Example and Source Code […]

Reply
Animated Login Form In Html - Login Portal May 18, 2021 At 12:10 pm

[…] Animated Login Page In HTML CSS Example and Source Code […]

Reply
Login Pages In Html - UK Web Portals December 22, 2021 At 6:30 pm

[…] 17. Animated Login Page In HTML CSS | Example and Source Code […]

Reply
Sample Login Page Html Code - Donation Portal December 26, 2021 At 8:07 am

[…] Animated Login Page In HTML CSS Example and Source Code […]

Reply
Sample Asp Code For Login Page - Donation Portal December 28, 2021 At 6:34 pm

[…] Animated Login Page In HTML CSS Example and Source Code […]

Reply
Sample Login Page In Html5 - Donation Portal January 28, 2022 At 12:04 pm

[…] Animated Login Page In HTML CSS Example and Source Code […]

Reply
Html Login Page Code With Css - logininfos.com April 15, 2022 At 12:11 pm

[…] Animated Login Page In HTML CSS Example and Source Code […]

Reply
Login Page Css3 - logininfos.com April 17, 2022 At 10:23 am

[…] Animated Login Page In HTML CSS – webdevtrick.com […]

Reply
Login Page Code In Html Logout - logininfos.com July 30, 2022 At 4:09 pm

[…] » Visit Now Aug 07, 2019 · How we can create an animated login page design using HTML and CSS? Solution: Animated Login Page In HTML CSS, Example and Source Code. Previous I have shared many login forms, but this time is for the whole page design. If any website has membership or user feature, then they probably have a separate login page.Author: Shaan […]

Reply
Login Page In Html With Css Sign Up - logininfos.com August 10, 2022 At 4:02 am

[…] » Visit Now Aug 07, 2019 · Solution: Animated Login Page In HTML CSS, Example and Source Code. Previous I have shared many login forms, but this time is for the whole page design. If any website has membership or user feature, then they probably have a separate login page.Author: Shaan […]

Reply
Login Pages In Html With Source Code Signin - logininfos.com August 10, 2022 At 5:01 pm

[…] » Visit Now Aug 07, 2019 · How we can create an animated login page design using HTML and CSS? Solution: Animated Login Page In HTML CSS, Example and Source Code. Previous I have shared many login forms, but this time is for the whole page design. If any website has membership or user feature, then they probably have a separate login page.Author: Shaan […]

Reply
Free Html Login Page - Glory Logins August 26, 2022 At 7:55 pm

[…] Developers & designers are using these free bootstrap login page templates when creating a website or web app. To save your time on your project, we have created many creative free html5 login page templates that built-in bootstrap. All these responsive login form designs are free to use for your next project. Using any of the below templates … https://webdevtrick.com › animated-login-page-html-css […]

Reply
Html Code Login Page Download - logininfos.com August 31, 2022 At 9:58 am

[…] » Visit Now Aug 07, 2019 · How we can create an animated login page design using HTML and CSS? Solution: Animated Login Page In HTML CSS, Example and Source Code. Previous I have shared many login forms, but this time is for the whole page design. If any website has membership or user feature, then they probably have a separate login page.Author: Shaan […]

Reply