animated CSS Archives - Codeplaners https://codeplaners.com/tag/animated-css/ Code Solution Fri, 24 Mar 2023 09:30:36 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.7 https://codeplaners.com/wp-content/uploads/2020/09/cropped-favicon-social-32x32.png animated CSS Archives - Codeplaners https://codeplaners.com/tag/animated-css/ 32 32 Login Form CSS and Html Example https://codeplaners.com/login-form-css-and-html-example/ https://codeplaners.com/login-form-css-and-html-example/#respond Fri, 24 Mar 2023 09:30:36 +0000 https://codeplaners.com/?p=1468 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 … Continue reading "Login Form CSS and Html Example"

The post Login Form CSS and Html Example appeared first on Codeplaners.

]]> 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…

The post Login Form CSS and Html Example appeared first on Codeplaners.

]]> https://codeplaners.com/login-form-css-and-html-example/feed/ 0 How To Create Animated Background using CSS https://codeplaners.com/how-to-create-animated-background-using-css/ https://codeplaners.com/how-to-create-animated-background-using-css/#respond Wed, 26 May 2021 00:13:41 +0000 https://codeplaners.com/?p=842 Hello Dev, Today, i we will show you how to create animated background using CSS. This article will give you simple example of how to create animated background using CSS. you will learn how to create animated background using CSS. So let’s follow few step to create example of how to create animated background using … Continue reading "How To Create Animated Background using CSS"

The post How To Create Animated Background using CSS appeared first on Codeplaners.

]]> Hello Dev,

Today, i we will show you how to create animated background using CSS. This article will give you simple example of how to create animated background using CSS. you will learn how to create animated background using CSS. So let’s follow few step to create example of how to create animated background using CSS.

Example

<!DOCTYPE html>
<html>
  
<head>
    <title>How To Create Animated Background using CSS</title>
<style>
body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(155deg, #4caf50, #e91e63, #ff9800, #00bcd4);
	background-size: 450%;
	animation: bganimation 15s infinite;
}
.container {
	height: 100vh;
	width: 1170px;
	margin:0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
h3 {
color: #fff;
font-size: 44px;
}

@keyframes bganimation {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}
</style>
</head>
  
<body>
    <div class="container">
       <h3>How To Create Animated Background using CSS</h3>
    </div>
</body>
  
</html>

The post How To Create Animated Background using CSS appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-create-animated-background-using-css/feed/ 0