Codeplaners Menu
  • Home
  • WordPress
  • Laravel
  • Python
  • PHP
  • Bootstrap
  • Android Studio
  • Codeigniter
  • Vue Js
  • jQuery
  • WordPress
  • Laravel
  • Python
  • Android Studio
  • Django
  • Ionic
  • Bootstrap
  • HTML&CSS
  • CakePHP
  • Codeigniter
  • PHP
  • Angular
  • javascript
  • jQuery
  • Node Js
  • Ios
  • Vue Js
  • MySQL
  • Firebase
  • Rails
  • Reacts
  • Home
  • HTML&CSS

Login Form CSS and Html Example

by admin Author

Published - March 24, 2023 09:30 am | Updated - March 24, 2023 09:30 am

45 Views

Hi Dev,

Today, i we will show you Login Form CSS and Html example. This article will give you simple example of Login Form CSS and Html example. you will Login Form CSS and Html example. In this article, we will implement a Login Form CSS and Html example.

So, let’s follow few steps to create example of Login Form CSS and Html example.

Example

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form CSS and Html example - codeplaners</title>
<style>
    html {
  height: 100%;
}
body {
  margin:0;
  padding:0;
  font-family: sans-serif;
  background: linear-gradient(#141e30, #243b55);
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.login-box .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #f49003;
  font-size: 12px;
}

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #f49003;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

.login-box a:hover {
  background: #f49003;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #f49003,
              0 0 25px #f49003,
              0 0 50px #f49003,
              0 0 100px #f49003;
}

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f49003);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #f49003);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #f49003);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #f49003);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

</style>
</head>

<body>
    <div class="login-box">
  <h2>Login</h2>
  <form>
    <div class="user-box">
      <input type="text" name="" required="">
      <label>Username</label>
    </div>
    <div class="user-box">
      <input type="password" name="" required="">
      <label>Password</label>
    </div>
    <a href="#">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      Submit
    </a>
  </form>
</div>
</body>
</html>

I hope it will assist you…

animated CSScssCSS and HtmlhtmlLogin FormLogin Form CSS and Html

Recommended Posts

  • How To Create Animated Background using CSS

Random Post

  • How to Create a project with Android Studio

  • PHP Variables Pass In JavaScript Example

  • Responsive Media Queries All Devices

  • How To get Related Products In WordPress

  • HTML Tag Value Get in PHP

  • Laravel 8 Increase Session Timeout

  • Laravel 8 Auth Login and Registration

  • Post Content Limit In WordPress

  • Laravel 8 Custom Login And Registration

  • How to Fixed Error Establishing a Database Connection in WordPress

Trending Post
  • Php Login Register Example

  • How to install and run multiple xampp on windows

  • Laravel 8 Add To Cart Function With Ajax Example

  • Laravel 8 Comment Example

  • How to Create Laravel 8 Vue JS CRUD Example

  • How to install Codeigniter in localhost

  • How to Install Bootstrap 5 in Angular 12

  • Laravel 8 Override Auth Register Method

  • How to Create a MySQL Database with phpmyadmin localhost

  • How to Build Laravel Vue JS CRUD Example

Find us elsewhere

  • © 2022 CodePlaners All rights reserved.
  • Disclaimer
  • Privacy Policy