Form, Login Form, SignUp Form

Animated signup and sign in form in HTML and CSS

Hello, in this particular post we will learn how to create animated signup and sign-in form in HTML, CSS, and javascript. Now we will see how to create a signup and sign-in form in Html, CSS, and javascript.

The signup page and sign-in pages are created and they are animated. First, you have to create an account by putting your details in these fields of the sign-up form. Then we have the page of login in them. You can move to that page for accessing your account. The same procedure is applied to both logins and sign-up forms. Where a sign-in form is used to login into an existing account using a username or email or phone and password.

Background color and forms are different from each other. We have created a layer of boxes and put these forms inside that box. Boxes have a shadow around all four sides. Then the box is divided into two parts using the flex property. Both of them have different content and color. These forms appear in the form of transitions. They have a beautiful background gradient color and you can change it and use it related to your website category.

You might like it:

It is a markup language and we will use it to create the skeleton of forms. The code is given below and used in your Html file.

<!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>Sign in/up Form | FantacyDesigns</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h2> Sign in/up Form | Coding Challenge</h2>
<div class="container" id="container">
	<div class="form-container sign-up-container">
		<form action="#">
			<h1>Create Account</h1>
			
			<span>or use your email for registration</span>
			<input type="text" placeholder="Name" />
			<input type="email" placeholder="Email" />
			<input type="password" placeholder="Password" />
			<button>Sign Up</button>
		</form>
	</div>
	<div class="form-container sign-in-container">
		<form action="#">
			<h1>Sign in</h1>
			
			<span>or use your account</span>
			<input type="email" placeholder="Email" />
			<input type="password" placeholder="Password" />
			<a href="#">Forgot your password?</a>
			<button>Sign In</button>
		</form>
	</div>
	<div class="overlay-container">
		<div class="overlay">
			<div class="overlay-panel overlay-left">
				<h1>Welcome Back!</h1>
				<p>To keep connected with us please login with your personal 

info</p>
				<button class="ghost" id="signIn">Sign In</button>
			</div>
			<div class="overlay-panel overlay-right">
				<h1>Hello, Friend!</h1>
				<p>Enter your personal details and start journey with us</p>
				<button class="ghost" id="signUp">Sign Up</button>
			</div>
		</div>
	</div>
</div>

<footer>
	<p>
		Created with ❤️  by
		<a target="_blank" href="https://fantacydesigns.com/">FantacyDesigns</a>
		from Florin Pop.
		
	</p>
</footer>
<script>
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');

signUpButton.addEventListener('click', () => {
	container.classList.add("right-panel-active");
});

signInButton.addEventListener('click', () => {
	container.classList.remove("right-panel-active");
});
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sign in/up Form | FantacyDesigns</title>

</head>

<body>

<h2> Sign in/up Form | Coding Challenge</h2>

<h1>Create Account</h1>

<span>or use your email for registration</span>

</form>

</div>

<span>or use your account</span>

<a href="#">Forgot your password?</a>

</form>

</div>

<h1>Welcome Back!</h1>

<p>To keep connected with us please login with your personal

info</p>

</div>

<h1>Hello, Friend!</h1>

<p>Enter your personal details and start journey with us</p>

</div>

<p>

Created with ❤️ by

<a target="_blank" href="https://fantacydesigns.com/">FantacyDesigns</a>

from Florin Pop.

</p>

</footer>

const signUpButton = document.getElementById('signUp');

const signInButton = document.getElementById('signIn');

const container = document.getElementById('container');

signUpButton.addEventListener('click', () => {

container.classList.add("right-panel-active");

});

signInButton.addEventListener('click', () => {

container.classList.remove("right-panel-active");

});

</script>

</body>

</html>

Source code of CSS:

It is also a markup language and we use it to design our projects. Forms design is due to CSS and code is also provided below.

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
	box-sizing: border-box;
}

body {
	background: #f6f5f7;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: 'Montserrat', sans-serif;
	height: 100vh;
	margin: -20px 0 50px;
}

h1 {
	font-weight: bold;
	margin: 0;
}

h2 {
	text-align: center;

}

p {
	font-size: 14px;
	font-weight: 100;
	line-height: 20px;
	letter-spacing: 0.5px;
	margin: 20px 0 30px;
}

span {
	font-size: 12px;
margin-bottom:20px;
}

a {
	color: #333;
	font-size: 14px;
	text-decoration: none;
	margin: 15px 0;
} 

button {
	border-radius: 20px;
	border: 1px solid #FF4B2B;
	background-color: #FF4B2B;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	padding: 12px 45px;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: transform 80ms ease-in;
cursor:pointer;
}

button:active {
	transform: scale(0.95);
}

button:focus {
	outline: none;
}

button.ghost {
	background-color: transparent;
	border-color: #FFFFFF;
}

form {
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 50px;
	height: 100%;
	text-align: center;
}

input {
	background-color: #eee;
	border: none;
	padding: 12px 15px;
	margin: 8px 0;
	width: 100%;
outline:none;
}

.container {
	background-color: #fff;
	border-radius: 10px;
  	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
			0 10px 10px rgba(0,0,0,0.22);
	position: relative;
	overflow: hidden;
	width: 768px;
	max-width: 100%;
	min-height: 480px;
}

.form-container {
	position: absolute;
	top: 0;
	height: 100%;
	transition: all 0.6s ease-in-out;
}

.sign-in-container {
	left: 0;
	width: 50%;
	z-index: 2;
}

.container.right-panel-active .sign-in-container {
	transform: translateX(100%);
}

.sign-up-container {
	left: 0;
	width: 50%;
	opacity: 0;
	z-index: 1;
}

.container.right-panel-active .sign-up-container {
	transform: translateX(100%);
	opacity: 1;
	z-index: 5;
	animation: show 0.6s;
}

@keyframes show {
	0%, 49.99% {
		opacity: 0;
		z-index: 1;
	}
	
	50%, 100% {
		opacity: 1;
		z-index: 5;
	}
}

.overlay-container {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	overflow: hidden;
	transition: transform 0.6s ease-in-out;
	z-index: 100;
}

.container.right-panel-active .overlay-container{
	transform: translateX(-100%);
}

.overlay {
	background: #FF416C;
	background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
	background: linear-gradient(to right, #FF4B2B, #FF416C);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 0;
	color: #FFFFFF;
	position: relative;
	left: -100%;
	height: 100%;
	width: 200%;
  	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
  	transform: translateX(50%);
}

.overlay-panel {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 40px;
	text-align: center;
	top: 0;
	height: 100%;
	width: 50%;
	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}

.overlay-left {
	transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
	transform: translateX(0);
}

.overlay-right {
	right: 0;
	transform: translateX(0);
}

.container.right-panel-active .overlay-right {
	transform: translateX(20%);
}

.social-container {
	margin: 20px 0;
}

.social-container a {
	border: 1px solid #DDDDDD;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0 5px;
	height: 40px;
	width: 40px;

}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}

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

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {

box-sizing: border-box;

}

body {

background: #f6f5f7;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

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

height: 100vh;

margin: -20px 0 50px;

}

h1 {

font-weight: bold;

margin: 0;

}

h2 {

text-align: center;

}

p {

font-size: 14px;

font-weight: 100;

line-height: 20px;

letter-spacing: 0.5px;

margin: 20px 0 30px;

}

span {

font-size: 12px;

margin-bottom:20px;

}

a {

color: #333;

font-size: 14px;

text-decoration: none;

margin: 15px 0;

}

button {

border-radius: 20px;

border: 1px solid #FF4B2B;

background-color: #FF4B2B;

color: #FFFFFF;

font-size: 12px;

font-weight: bold;

padding: 12px 45px;

letter-spacing: 1px;

text-transform: uppercase;

transition: transform 80ms ease-in;

cursor:pointer;

}

button:active {

transform: scale(0.95);

}

button:focus {

outline: none;

}

button.ghost {

background-color: transparent;

border-color: #FFFFFF;

}

form {

background-color: #FFFFFF;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding: 0 50px;

height: 100%;

text-align: center;

}

input {

background-color: #eee;

border: none;

padding: 12px 15px;

margin: 8px 0;

width: 100%;

outline:none;

}

.container {

background-color: #fff;

border-radius: 10px;

box-shadow: 0 14px 28px rgba(0,0,0,0.25),

0 10px 10px rgba(0,0,0,0.22);

position: relative;

overflow: hidden;

width: 768px;

max-width: 100%;

min-height: 480px;

}

.form-container {

position: absolute;

top: 0;

height: 100%;

transition: all 0.6s ease-in-out;

}

.sign-in-container {

left: 0;

width: 50%;

z-index: 2;

}

.container.right-panel-active .sign-in-container {

transform: translateX(100%);

}

.sign-up-container {

left: 0;

width: 50%;

opacity: 0;

z-index: 1;

}

.container.right-panel-active .sign-up-container {

transform: translateX(100%);

opacity: 1;

z-index: 5;

animation: show 0.6s;

}

@keyframes show {

0%, 49.99% {

opacity: 0;

z-index: 1;

}

50%, 100% {

opacity: 1;

z-index: 5;

}

.overlay-container {

position: absolute;

top: 0;

left: 50%;

width: 50%;

height: 100%;

overflow: hidden;

transition: transform 0.6s ease-in-out;

z-index: 100;

}

.container.right-panel-active .overlay-container{

transform: translateX(-100%);

}

.overlay {

background: #FF416C;

background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);

background: linear-gradient(to right, #FF4B2B, #FF416C);

background-repeat: no-repeat;

background-size: cover;

background-position: 0 0;

color: #FFFFFF;

position: relative;

left: -100%;

height: 100%;

width: 200%;

transform: translateX(0);

transition: transform 0.6s ease-in-out;

}

.container.right-panel-active .overlay {

transform: translateX(50%);

}

.overlay-panel {

position: absolute;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding: 0 40px;

text-align: center;

top: 0;

height: 100%;

width: 50%;

transform: translateX(0);

transition: transform 0.6s ease-in-out;

}

.overlay-left {

transform: translateX(-20%);

}

.container.right-panel-active .overlay-left {

transform: translateX(0);

}

.overlay-right {

right: 0;

transform: translateX(0);

}

.container.right-panel-active .overlay-right {

transform: translateX(20%);

}

.social-container {

margin: 20px 0;

}

.social-container a {

border: 1px solid #DDDDDD;

border-radius: 50%;

display: inline-flex;

justify-content: center;

align-items: center;

margin: 0 5px;

height: 40px;

width: 40px;

}

footer {

background-color: #222;

color: #fff;

font-size: 14px;

bottom: 0;

position: fixed;

left: 0;

right: 0;

text-align: center;

z-index: 999;

}

footer p {

margin: 10px 0;

}

footer i {

color: red;

}

footer a {

color: #3c97bf;

text-decoration: none;

}

Code of javascript:

Javascript is a dynamic language that we use to add functionality to our projects. Transitions and on_click functionality are due to javascript.

<script>
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');

signUpButton.addEventListener('click', () => {
	container.classList.add("right-panel-active");
});

signInButton.addEventListener('click', () => {
	container.classList.remove("right-panel-active");
});
</script>

const signUpButton = document.getElementById('signUp');

const signInButton = document.getElementById('signIn');

const container = document.getElementById('container');

signUpButton.addEventListener('click', () => {

container.classList.add("right-panel-active");

});

signInButton.addEventListener('click', () => {

container.classList.remove("right-panel-active");

});

</script>

Download source code:

Source code is also provided and you can download it from the below download source code button.

Task:

Your task is to modify the page login and sign up. Change the background to an image from a solid color. Change it in both sign_in and sign_up forms. Also, increase the gap between the fields of the forms.

If you have any type of query then comment below and we will try our best to answer all the queries.

Thanks for reading it.

Go to top

Download Source CodeClick to Download