Login Form

TITLE : Login Form Using HTML and CSS | HTML Login Form| Flat Design | Flat UI

HTML :

<html>

<head>

<title>Animated Login Form</title>

</head>

<body>

<form>

<h3>Login</h3>

<button class="submit">Login</button>

</form>

</body>

</html>

CSS :

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: righteous;

}

body {

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background: linear-gradient(to right ,#f9b16e,#f68080);

}

form {

width: 25%;

height: 85%;

background: #fff;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

box-shadow: 0 10px 25px -4px rgba(0,0,0,0.2);

border-radius: 5px;

}

img {

width: 120px;

height: 120px;

}

h3 {

font-size: 2.8rem;

margin: 20px 0;

color:#424242;

}

input {

width: 85%;

padding: 12px 20px;

margin-bottom: 15px;

border: none;

outline: none;

border-radius: 5px;

border:2px solid #9e9e9e;

font-size: 1rem;

color: #6200EA;

}

input:focus{

border:2px solid #6200EA;

}

.submit {

padding: 12px 0;

background: #6200EA;

color:#fff;

font-size: 1rem;

width:85%;

border-radius: 5px;

border: none;

outline: none;

}

.submit:hover {

background: #204051;

}