Registration Form

By Rafi

form registration

How do I use This?

A stylish registration form that works well in a modal, dropdown or stand-alone.

HTML

<div class="form-registration">

  <figure class="form-registration-img">
    <img src="https://images.pexels.com/photos/221205/pexels-photo-221205.jpeg?h=350&auto=compress&cs=tinysrgb" alt="" />
    <figcaption class="form-registration-img-caption">Experience everything Yeti+ has to offer through Yeti e-shoppe and our related apps.</figcaption>
  </figure>

  <form class="form-registration-group" action="">
    <input class="form-registration-input"  type="email" placeholder="Your email">
    <input class="form-registration-submit-button" type="submit" value="Continue">
    <p class="or-divider"><span>or</span></p>
    <a class="form-registration-social-button" href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i> Sign Up With facebook</a>
    <p class="form-registration-member-signin">Already a member? <a href="#">Sign in</a></p>
    <p class="form-registration-terms"><a href="#">Terms &amp; Conditions</a>|<a href="#">Privacy</a></p>
  </form>

</div>

$form-registration-bg: $white;
$form-registration-highlight-color: $primary-color;
$social-brand-facebook: #3b5998;

.form-registration {
  background: $form-registration-bg;

  .form-registration-img {
    position: relative;

    .form-registration-img-caption {
      position: absolute;
      padding: 0.5rem;
      text-align: center;
      width: 100%;
      bottom: 0;
      background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgba($white, 0.3)), /* Top */
        color-stop(0, rgba($white, 1.0)) /* Bottom */
      );
    }
  }
}

.form-registration-group {
  padding: $global-padding;

  .form-registration-input {
    border-radius: $global-radius;

    &:focus {
      border: 2px solid $form-registration-highlight-color;
      box-shadow: 0 0 5px $form-registration-highlight-color;
    }
  }

  .form-registration-submit-button {
    text-transform: uppercase;
    margin-bottom: 0;
    @include button(true, $primary-color, auto, auto, solid);
    border-radius: 5000px;
  }

  .form-registration-social-button {
    text-transform: uppercase;
    font-size: 16px;
    @include button(true, $social-brand-facebook, auto, $social-brand-facebook, hollow);
    border-radius: 5000px;

    .fa {
      vertical-align: text-top;
      margin-right: 0.5rem;
    }
  }

  .form-registration-member-signin {
    text-align: center;
    font-weight: bold;
    font-size: 14px;

    a {
      margin-left: 0.25rem;
    }
  }

  .form-registration-terms {
    text-align: center;
    font-size: 12px;

    a:first-child {
      margin-right: 0.25rem;
    }

    a:last-child {
      margin-left: 0.25rem;
    }
  }

  .or-divider {
    position: relative;
    margin: 1.5rem 0px;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    height: 0px;
    border: 1px solid $light-gray;

    span {
      color: $dark-gray;
      @include horizontal-center;
      top: -12px;
      background-color: $form-registration-bg;
      padding: 0 8px;
    }
  }
}

.form-registration {
  background: #fefefe;
}

.form-registration .form-registration-img {
  position: relative;
}

.form-registration .form-registration-img .form-registration-img-caption {
  position: absolute;
  padding: 0.5rem;
  text-align: center;
  width: 100%;
  bottom: 0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(1, rgba(254, 254, 254, 0.3)), color-stop(0, #fefefe));
}

.form-registration-group {
  padding: 1rem;
}

.form-registration-group .form-registration-input {
  border-radius: 0;
}

.form-registration-group .form-registration-input:focus {
  border: 2px solid #1779ba;
  box-shadow: 0 0 5px #1779ba;
}

.form-registration-group .form-registration-submit-button {
  text-transform: uppercase;
  margin-bottom: 0;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 1rem 0;
  padding: 0.85em 1em;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  background-color: #1779ba;
  color: #fefefe;
  display: block;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  border-radius: 5000px;
}

[data-whatinput='mouse'] .form-registration-group .form-registration-submit-button {
  outline: 0;
}

.form-registration-group .form-registration-submit-button:hover, .form-registration-group .form-registration-submit-button:focus {
  background-color: #126195;
  color: #fefefe;
}

.form-registration-group .form-registration-social-button {
  text-transform: uppercase;
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 1rem 0;
  padding: 0.85em 1em;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  border: 1px solid #3b5998;
  color: #3b5998;
  display: block;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  border-radius: 5000px;
}

[data-whatinput='mouse'] .form-registration-group .form-registration-social-button {
  outline: 0;
}

.form-registration-group .form-registration-social-button, .form-registration-group .form-registration-social-button:hover, .form-registration-group .form-registration-social-button:focus {
  background-color: transparent;
}

.form-registration-group .form-registration-social-button:hover, .form-registration-group .form-registration-social-button:focus {
  border-color: #1e2d4c;
  color: #1e2d4c;
}

.form-registration-group .form-registration-social-button .fa {
  vertical-align: text-top;
  margin-right: 0.5rem;
}

.form-registration-group .form-registration-member-signin {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}

.form-registration-group .form-registration-member-signin a {
  margin-left: 0.25rem;
}

.form-registration-group .form-registration-terms {
  text-align: center;
  font-size: 12px;
}

.form-registration-group .form-registration-terms a:first-child {
  margin-right: 0.25rem;
}

.form-registration-group .form-registration-terms a:last-child {
  margin-left: 0.25rem;
}

.form-registration-group .or-divider {
  position: relative;
  margin: 1.5rem 0px;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  height: 0px;
  border: 1px solid #e6e6e6;
}

.form-registration-group .or-divider span {
  color: #8a8a8a;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  top: -12px;
  background-color: #fefefe;
  padding: 0 8px;
}

Registration Form

By Rafi

Rounded Input Group

Floating Label Form

Animated Expanding Search Form

Registration Form

By Rafi

Similar Building Blocks

Rounded Input Group

Floating Label Form

Animated Expanding Search Form