Animated login Form Using HTML and CSS ( With Source Code )

Blogger Leb
October 24, 2020
0

Animated login Form Using HTML and CSS ( With Source Code )

Hello, Would you like to create an awesome animated login form?

If your answer is yes, then I will guide you completely on how to create a professional login form slowly. You can use a variety of programming languages ​​to create login forms. However, a professional login page is created specifically using HTML, CSS, and JavaScript programming languages. In this article, I will show you how to create a Professional Animated Login Form that is completely Professional and Responsive. The login form created in this article is created using only HTML and CSS programming languages. A small amount of JavaScript programming language has also been used to animate this login form.

How To Make Responsive and Animated Login Form Using HTML and CSS

 You can use this login form in your project or website. There are different types of login forms but a professional and animated login form will attract more of your viewers or users towards your website. So of course if you want to use the login form on your website. But I think you should always use the Responsive and Animated Login Form. If you want to learn how to create an animated login form, I will help you. I am going to teach you step-by-step how to create this animated login form using only simple HTML and CSS programming language.

Below is the source code required to create this login form. If you want you can copy or download that source code and use it in your project.



Some information about the login form

💚 The login form is fully animated using only HTML, CSS, and a small amount of JavaScript programming language.

 ðŸ’– This is an animated login form. In general, it looks like a closed book, but when you or your user hover over the login form, the login form will become a straight page. It's as if someone opened a book.

💜 This login form has the opportunity to give the user ID, password. Then there is the login button below. Clicking on that button will allow you to log in to your user account.

💛 Below is the Forgot Password option which means your user can recover the password from here.

💙All in all, it is an awesome animated login form. Which will help you a lot to create an animated login form.


Make it animate using This code

Below is the code I need to make it animate. Which will help you to understand which programming code has been used to make it animate.

  top: 0;
  right: calc(100% - 1px);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  -webkit-transform: skewY(-35deg) scaleX(-1);
          transform: skewY(-35deg) scaleX(-1);
  z-index: -1;

You can download the source code required to create it by clicking on the download button above.

Create this login form Using HTML and CSS

 If you want to try this code yourself, you can. That is why I have given the source code below. First of all, you create an HTML file (rename.html) and a CSS file (rename.css). Then you put the HTML code in the HTML file and the CSS code in the CSS file. Be sure to link the HTML and cis code to each other (<link rel="stylesheet" href="sidebar.css">).

My special request is that you download the codes by clicking on the download button above without copying from the bottom.




HTML TAGS (<body> Add Code </body>)

This code is an HTML code (rename.html). Put this code in the head tags of your project and also in the head tags in the HTML file.




<form class="form" onsubmit="return false" autocomplete="off">
  <div class="form-inner">
    <h2>User Login</h2>
    <div class="input-wrapper">
      <label for="login-username">Username</label>
      <div class="input-group"><span class="icon">
          <svg viewBox="0 0 24 24">
             <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
            <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></path>
          </svg></span>
        <input type="text" id="login-username" data-lpignore="true"/>
      </div>
    </div>
     <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
    <div class="input-wrapper">
      <label for="login-password">Password</label>
      <div class="input-group"><span class="icon">
          <svg viewBox="0 0 24 24">
            <path d="M11.83,1.73C8.43,1.79 6.23,3.32 6.23,3.32C5.95,3.5 5.88,3.91 6.07,4.19C6.27,4.5 6.66,4.55 6.96,4.34C6.96,4.34 11.27,1.15 17.46,4.38C17.75,4.55 18.14,4.45 18.31,4.15C18.5,3.85 18.37,3.47 18.03,3.28C16.36,2.4 14.78,1.96 13.36,1.8C12.83,1.74 12.32,1.72 11.83,1.73M12.22,4.34C6.26,4.26 3.41,9.05 3.41,9.05C3.22,9.34 3.3,9.72 3.58,9.91C3.87,10.1 4.26,10 4.5,9.68C4.5,9.68 6.92,5.5 12.2,5.59C17.5,5.66 19.82,9.65 19.82,9.65C20,9.94 20.38,10.04 20.68,9.87C21,9.69 21.07,9.31 20.9,9C20.9,9 18.15,4.42 12.22,4.34M11.5,6.82C9.82,6.94 8.21,7.55 7,8.56C4.62,10.53 3.1,14.14 4.77,19C4.88,19.33 5.24,19.5 5.57,19.39C5.89,19.28 6.07,18.92 5.95,18.6V18.6C4.41,14.13 5.78,11.2 7.8,9.5C9.77,7.89 13.25,7.5 15.84,9.1C17.11,9.9 18.1,11.28 18.6,12.64C19.11,14 19.08,15.32 18.67,15.94C18.25,16.59 17.4,16.83 16.65,16.64C15.9,16.45 15.29,15.91 15.26,14.77C15.23,13.06 13.89,12 12.5,11.84C11.16,11.68 9.61,12.4 9.21,14C8.45,16.92 10.36,21.07 14.78,22.45C15.11,22.55 15.46,22.37 15.57,22.04C15.67,21.71 15.5,21.35 15.15,21.25C11.32,20.06 9.87,16.43 10.42,14.29C10.66,13.33 11.5,13 12.38,13.08C13.25,13.18 14,13.7 14,14.79C14.05,16.43 15.12,17.54 16.34,17.85C17.56,18.16 18.97,17.77 19.72,16.62C20.5,15.45 20.37,13.8 19.78,12.21C19.18,10.61 18.07,9.03 16.5,8.04C14.96,7.08 13.19,6.7 11.5,6.82M11.86,9.25V9.26C10.08,9.32 8.3,10.24 7.28,12.18C5.96,14.67 6.56,17.21 7.44,19.04C8.33,20.88 9.54,22.1 9.54,22.1C9.78,22.35 10.17,22.35 10.42,22.11C10.67,21.87 10.67,21.5 10.43,21.23C10.43,21.23 9.36,20.13 8.57,18.5C7.78,16.87 7.3,14.81 8.38,12.77C9.5,10.67 11.5,10.16 13.26,10.67C15.04,11.19 16.53,12.74 16.5,15.03C16.46,15.38 16.71,15.68 17.06,15.7C17.4,15.73 17.7,15.47 17.73,15.06C17.79,12.2 15.87,10.13 13.61,9.47C13.04,9.31 12.45,9.23 11.86,9.25M12.08,14.25C11.73,14.26 11.46,14.55 11.47,14.89C11.47,14.89 11.5,16.37 12.31,17.8C13.15,19.23 14.93,20.59 18.03,20.3C18.37,20.28 18.64,20 18.62,19.64C18.6,19.29 18.3,19.03 17.91,19.06C15.19,19.31 14.04,18.28 13.39,17.17C12.74,16.07 12.72,14.88 12.72,14.88C12.72,14.53 12.44,14.25 12.08,14.25Z"></path>
          </svg></span>
        <input type="password" id="login-password" data-lpignore="true"/>
      </div>
       <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
    </div>
    <div class="btn-group">
      <button class="btn btn--primary">Sign in</button><a class="btn--text" href="#0">Forgot password?</a>
    </div>
  </div>
   <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
</form>


CSS CODE (<head><style> Add code</style></head>)

This code is a CSS code (rename.css). You enter this code in the style tags in the head tags of your project. Also, you put in the style tags in the CSS file.

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
:root {
  --space-root: 1rem;
  --space-xs: calc(var(--space-root) / 2);
  --space-s: calc(var(--space-root) / 1.5);
  --space-m: var(--space-root);
  --space-l: calc(var(--space-root) * 1.5);
  --space-xl: calc(var(--space-root) * 2);
  --color-primary: mediumslateblue;
  --color-secondary: black;
  --color-tertiary: hotpink;
  --base-border-radius: 0.25rem;
  --ease: cubic-bezier(0.075, 0.82, 0.165, 1);
  --duration: 350ms;
  --font-family: 'Roboto', sans-serif;
  --font-size: 1.25rem;
}

* {
  box-sizing: border-box;
}

body {/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  display: grid;
  place-items: center;
  margin: 0;
  height: 100vh;
  padding: var(--space-m);
  font-size: var(--font-size);
  font-family: var(--font-family);
  line-height: 1.2;
  background-color: var(--color-tertiary);
}

a {
  color: var(--color-primary);
}
a:focus {
  color: var(--color-secondary);
}

h2 {/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  font-weight: 700;
  font-size: calc(var(--font-size) * 1.5);
}

.form {
  position: relative;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  -webkit-transform: skewY(-5deg) translateY(10%) scale(0.94);
          transform: skewY(-5deg) translateY(10%) scale(0.94);
  -webkit-transition: box-shadow var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease);
  transition: box-shadow var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease);
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease);
}
.form:before, .form:after {
  content: '';
  position: absolute;
  pointer-events: none;
  background-color: #ebebeb;
  width: 25%;
  height: 100%;
  -webkit-transition: background-color var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease);
  transition: background-color var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease);
  transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
  transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease);
}/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.form:before {
  top: 0;
  right: calc(100% - 1px);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  -webkit-transform: skewY(-35deg) scaleX(-1);
          transform: skewY(-35deg) scaleX(-1);
  z-index: -1;
}
.form:after {
  top: 0;/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  left: calc(100% - 1px);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: skewY(-35deg) scaleX(-1);
          transform: skewY(-35deg) scaleX(-1);
  z-index: 2;
}
.form:hover, .form:focus-within {
  -webkit-transform: scale(1.0001);
          transform: scale(1.0001);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.form:hover:before, .form:hover:after, .form:focus-within:before, .form:focus-within:after {
  background-color: white;
  -webkit-transform: skewY(0);
          transform: skewY(0);
}

.form-inner {
  padding: var(--space-xl);
  background-color: white;
  z-index: 1;
}
.form-inner > * + * {
  margin-top: var(--space-xl);
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.input-wrapper:focus-within label {
  color: var(--color-secondary);
}
.input-wrapper:focus-within .icon {
  background-color: var(--color-secondary);
}
.input-wrapper:focus-within input {
  border-color: var(--color-secondary);
}
.input-wrapper + .input-wrapper {
  margin-top: var(--space-l);
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.input-group {
  position: relative;
}
.input-group input {
  border-radius: var(--base-border-radius);
  padding-left: calc(var(--space-s) + 60px);
}
.input-group .icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-top-left-radius: var(--base-border-radius);
  border-bottom-left-radius: var(--base-border-radius);
  pointer-events: none;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
label {
  font-size: calc(var(--font-size) / 1.65);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.065rem;
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-primary);
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.icon {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-flex: 0;
          flex: 0 1 auto;
  padding: var(--space-m);
  background-color: var(--color-primary);
}
.icon svg {
  width: 1.25em;
  height: 1.25em;
  fill: white;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: -webkit-transform var(--duration) var(--ease);
  transition: -webkit-transform var(--duration) var(--ease);
  transition: transform var(--duration) var(--ease);
  transition: transform var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease);
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
input {
  -webkit-box-flex: 1;
          flex: 1 1 0;
  width: 100%;
  outline: none;
  padding: var(--space-m);
  font-size: var(--font-size);
  font-family: var(--font-family);
  color: var(--color-secondary);
  border: 2px solid var(--color-primary);
}
input:focus {
  color: var(--color-primary);
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.btn-group {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
.btn-group > * + * {
  margin-left: var(--space-s);
}

.btn {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: justify;
          justify-content: space-between;
  outline: none;
  /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  padding: var(--space-m) var(--space-l);
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--base-border-radius);
}

.btn--primary {
  font-size: calc(var(--font-size) / 1.65);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.065rem;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
}
.btn--primary:focus {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn--text {
  font-size: calc(var(--font-size) / 1.5);
  padding: 0;
}



Hopefully, the above article will help you to create an animated and responsive login form. If you encounter any problems while creating the login form. But of course, you can let me know by commenting. I will definitely help you to create this animated login form completely.

❤Sharing is caring❤



Tags
Share to other apps

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)
To Top