Awesome signup form with html and css

Posted on October 18th, 2019

This is an awesome signup form with only html and css from DarkCode. To see how it works, just click on the button Run Pen below:

How to create awesome signup form

Step 1: Add Html

<div class="signup-form">
  <form class="" action="index.html" method="post">
    <h1>Sign Up</h1>
    <input type="text" placeholder="Full Name" class="txtb">
    <input type="email" placeholder="Email" class="txtb">
    <input type="password" placeholder="Password" class="txtb">
    <input type="submit" value="Create Account" class="signup-btn">
    <a href="#">Already Have one ?</a>

Step 2: Add CSS

  margin: 0;
  padding: 0;
  background: #487eb0;
  width: 300px;
  padding: 20px;
  text-align: center;
  background: url(;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
.signup-form h1{
  margin-top: 100px;
  font-family: 'Permanent Marker', cursive;
  color: #fff;
  font-size: 40px;
.signup-form input{
  display: block;
  width: 100%;
  padding: 0 16px;
  height: 44px;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  border: none;
  font-family: "montserrat",sans-serif;
  margin: 20px 0;
  background: rgba(255,255,255,.5);
  border-radius: 6px;
  margin-top: 60px;
  margin-bottom: 20px;
  background: #487eb0;
  color: #fff;
  border-radius: 44px;
  cursor: pointer;
  transition: 0.8s;
  transform: scale(0.96);
.signup-form a{
  text-decoration: none;
  color: #fff;
  font-family: "montserrat",sans-serif;
  font-size: 14px;
  padding: 10px;
  transition: 0.8s;
  display: block;
.signup-form a:hover{
  background: rgba(0,0,0,.3);