Social Log In Form

By Rafi

form registration login

How do I use This?

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

HTML

<div class="login-box">
  <div class="row collapse expanded">
    <div class="small-12 medium-6 column small-order-2 medium-order-1">
      <div class="login-box-form-section">
        <h1 class="login-box-title">Sign up</h1>
        <input class="login-box-input" type="text" name="username" placeholder="Username" />
        <input class="login-box-input" type="email" name="email" placeholder="E-mail" />
        <input class="login-box-input" type="password" name="password" placeholder="Password" />
        <input class="login-box-input" type="password" name="password2" placeholder="Retype password" />
        <input class="login-box-submit-button" type="submit" name="signup_submit" value="Sign me up" />
      </div>
      <div class="or">OR</div>
    </div>
    <div class="small-12 medium-6 column small-order-1 medium-order-2 login-box-social-section">
      <div class="login-box-social-section-inner">
        <span class="login-box-social-headline">Sign in with<br />your social network</span>
        <a class="login-box-social-button-facebook">Log in with facebook</a>
        <a class="login-box-social-button-twitter">Log in with Twitter</a>
        <a class="login-box-social-button-google">Log in with Google+</a>
      </div>
    </div>
  </div>
</div>

$login-box-radius: $global-radius;
$login-box-bg: $white;
$login-box-shadow: 0 2px 4px rgba($black, 0.4);
$login-box-inner-padding: 2.5rem;
$login-box-social-bg: url('https://images.pexels.com/photos/179124/pexels-photo-179124.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
$social-brand-facebook: #3b5998;
$social-brand-twitter: #55acee;
$social-brand-linkedin: #007bb5;
$social-brand-youtube: #bb0000;
$social-brand-instagram: #125688;
$social-brand-pinterest: #cb2027;
$social-brand-google-plus: #dd4b39;
$social-brand-github: #000000;
$social-brand-tumblr: #32506d;


.login-box {
  box-shadow: $login-box-shadow;
  background: $login-box-bg;
  border-radius: $login-box-radius;
  overflow: hidden;

  .or {
    @include absolute-center;
    @include badge;
    font-size: 1.275rem;
    background: $medium-gray;
    box-shadow: $login-box-shadow;

    @include breakpoint(small only) {
      top: 85%;
    }
  }
}

.login-box-title {
  font-weight: 300;
  font-size: 1.875rem;
  margin-bottom: 1.25rem;
}

.login-box-form-section,
.login-box-social-section-inner {
  padding: $login-box-inner-padding;
}

.login-box-social-section {
  background: $login-box-social-bg;
  background-size: cover;
  background-position: center;
}

.login-box-input {
  margin-bottom: 1.25rem;
  height: 2rem;
  border: 0;
  padding-left: 0;
  box-shadow: none;
  border-bottom: 1px solid $primary-color;
  font-weight: 400;
}

.login-box-input:focus {
  color: $primary-color;
  transition: 0.2s ease-in-out;
  box-shadow: none;
  border: 0;
  border-bottom: 2px solid $primary-color;
}

.login-box-submit-button {
  @include button(true, $primary-color, auto, auto, solid);
  border-radius: $global-radius;
  text-transform: uppercase;
  margin-bottom: 0;
}

.login-box-submit-button:hover,
.login-box-submit-button:focus {
  box-shadow: $login-box-shadow;
}

.login-box-submit-button:active {
  box-shadow: 0 1px 2px rgba($black, 0.4);
}

.login-box-social-button-facebook {
  @include button(true, $social-brand-facebook, auto, auto, solid);
  font-weight: 500;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.login-box-social-button-twitter {
  @include button(true, $social-brand-twitter, auto, $white, solid);
  font-weight: 500;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.login-box-social-button-google {
  @include button(true, $social-brand-google-plus, auto, $white, solid);
  font-weight: 500;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

[class*="login-box-social-button-"]:hover,
[class*="login-box-social-button-"]:focus {
  box-shadow: $login-box-shadow;
}

.login-box-social-headline {
  display: block;
  margin-bottom: rem-calc(40);
  font-size: 1.875rem;
  color: $white;
  text-align: center;
}

.login-box {
  box-shadow: 0 2px 4px rgba(10, 10, 10, 0.4);
  background: #fefefe;
  border-radius: 0;
  overflow: hidden;
}

.login-box .or {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: inline-block;
  min-width: 2.1em;
  padding: 0.3em;
  border-radius: 50%;
  font-size: 0.6rem;
  text-align: center;
  font-size: 1.275rem;
  background: #cacaca;
  box-shadow: 0 2px 4px rgba(10, 10, 10, 0.4);
}

@media screen and (max-width: 39.9375em) {
  .login-box .or {
    top: 85%;
  }
}

.login-box-title {
  font-weight: 300;
  font-size: 1.875rem;
  margin-bottom: 1.25rem;
}

.login-box-form-section,
.login-box-social-section-inner {
  padding: 2.5rem;
}

.login-box-social-section {
  background: url("https://images.pexels.com/photos/179124/pexels-photo-179124.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
  background-size: cover;
  background-position: center;
}

.login-box-input {
  margin-bottom: 1.25rem;
  height: 2rem;
  border: 0;
  padding-left: 0;
  box-shadow: none;
  border-bottom: 1px solid #1779ba;
  font-weight: 400;
}

.login-box-input:focus {
  color: #1779ba;
  transition: 0.2s ease-in-out;
  box-shadow: none;
  border: 0;
  border-bottom: 2px solid #1779ba;
}

.login-box-submit-button {
  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: 0;
  text-transform: uppercase;
  margin-bottom: 0;
}

[data-whatinput='mouse'] .login-box-submit-button {
  outline: 0;
}

.login-box-submit-button:hover, .login-box-submit-button:focus {
  background-color: #126195;
  color: #fefefe;
}

.login-box-submit-button:hover,
.login-box-submit-button:focus {
  box-shadow: 0 2px 4px rgba(10, 10, 10, 0.4);
}

.login-box-submit-button:active {
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.4);
}

.login-box-social-button-facebook {
  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: #3b5998;
  color: #fefefe;
  display: block;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  font-weight: 500;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

[data-whatinput='mouse'] .login-box-social-button-facebook {
  outline: 0;
}

.login-box-social-button-facebook:hover, .login-box-social-button-facebook:focus {
  background-color: #2f477a;
  color: #fefefe;
}

.login-box-social-button-twitter {
  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: #55acee;
  color: #fefefe;
  display: block;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  font-weight: 500;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

[data-whatinput='mouse'] .login-box-social-button-twitter {
  outline: 0;
}

.login-box-social-button-twitter:hover, .login-box-social-button-twitter:focus {
  background-color: #1a8fe8;
  color: #fefefe;
}

.login-box-social-button-google {
  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: #dd4b39;
  color: #fefefe;
  display: block;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  font-weight: 500;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

[data-whatinput='mouse'] .login-box-social-button-google {
  outline: 0;
}

.login-box-social-button-google:hover, .login-box-social-button-google:focus {
  background-color: #be3221;
  color: #fefefe;
}

[class*="login-box-social-button-"]:hover,
[class*="login-box-social-button-"]:focus {
  box-shadow: 0 2px 4px rgba(10, 10, 10, 0.4);
}

.login-box-social-headline {
  display: block;
  margin-bottom: 2.5rem;
  font-size: 1.875rem;
  color: #fefefe;
  text-align: center;
}

Social Log In Form

By Rafi

Sticky Signup Bar

Input Number Incrementer

Popup Contact Form

Social Log In Form

By Rafi

Similar Building Blocks

Sticky Signup Bar

Input Number Incrementer

Popup Contact Form