<div class="signin">
  <div class="top">
    <p>SIGN IN</p>
  </div>
  <div class="middle">
    <input type="text" id="name" class="inputs" placeholder="Name" />
    <input type="password" id="pword" class="inputs" placeholder="Password" />
    <button type="button" id="submit" class="">SIGN IN</button>
  </div>
  <div class="bottom">
    <ul class="signin_withs">
      <li>SIGN IN WITH</li>
      <li class="icon-google-plus"></li>
      <li class="icon-twitter"></li>
      <li class="icon-facebook"></li>
    </ul>  
    <div class="clearfix"></div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Oxygen');

@darkgrey: #4a4a4a;
@salmon: #f5795b;

body {
  background: #ebeae2;
}

div.signin {
  margin: 100px auto;
  width: 425px;
  box-shadow: 0 0 10px rgba(0,0,0,0.8);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  div.top {
    background: @darkgrey;
    color: white;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #6b6a6a;
    p {
      font-family: Oxygen, sans-serif;
      font-size: 13px;
      text-align: center;
      padding: 26px 0 22px;
      
    }
  }
  div.middle {
    background: @salmon;
    padding: 20px 15px 22px;
    input.inputs {
      font-family: 'Oxygen', sans-serif;
      display: block;
      width: 100%;
      padding: 15px 10px;
      margin: 0;
      border: 0;
      font-size: 13px;
      &:first-of-type {
        border: 1px solid white;
        border-bottom-color: #e2d7d4;
        -webkit-border-radius: 4px 4px 0 0;
        -moz-border-radius: 4px 4px 0 0;
        border-radius: 4px 4px 0 0;
        &:focus {
          border-top: 1px solid red;
          border-left: 1px solid red;
          border-right: 1px solid red;
          box-shadow: 0 -3px 10px rgba(255,0,0,0.4);
        }
      }
      &:last-of-type {
        border: 1px solid white;
        -webkit-border-radius: 0 0 4px 4px;
        -moz-border-radius: 0 0 4px 4px;
        border-radius: 0 0 4px 4px;
        &:focus {
          border-bottom: 1px solid red;
          border-left: 1px solid red;
          border-right: 1px solid red;
          box-shadow: 0 3px 10px rgba(255,0,0,0.4);
        }
      }
    }
    button#submit {
      font-family: Oxygen, sans-serif;
      display: block;
      width: 100%;
      background: @salmon;
      color: white;
      border: 1px solid;
      border-top-color: #F6917C;
      border-bottom-color: #E15940;
      border-left-color: darken(@salmon, 1%);
      border-right-color: darken(@salmon, 1%);
      padding: 18px;
      margin-top: 15px;
      font-size: 12px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      cursor: pointer;
      &.valid {
        background: #F04C27;
        border-bottom-color: #8E4431;
        border-left-color: #D2593C;
        border-right-color: #D2593C;
      }
    }
  }
  div.bottom {    
    background: @darkgrey;
    border-top: 1px solid #6b6a6a;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    
    ul.signin_withs {
      display: block;
      list-style: none;
      color: white;
      li {
        padding: 26px 0 22px;
        float: left;
        display: block;
        text-align: center;
        &:nth-child(1) {
          font-family: Oxygen, sans-serif;
          width: 52%;
          padding: 28px 30px 0;
          font-size: 13px;
        }
        &:nth-child(2) {
          width: 16%;
          cursor: pointer;
        }
        &:nth-child(3) {
          width: 16%;
          cursor: pointer;
        }
        &:nth-child(4) {
          width: 16%;
          cursor: pointer;
        }
        &[class^='icon']:hover {
          background: lighten(@darkgrey, 3%);
        }
        &[class^='icon']:active {
          background: #585757;
        }
      }
      &:after {
        content: "";
        display: table;
        clear: both;
      }
    }
  }
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
::-webkit-input-placeholder {
   color: #5a5958;
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #5a5958;
}


input:focus {
  outline: 0;
}








/* FONT STUFF */

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot');
}
@font-face {
	font-family: 'icomoon';
	src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff'),
		 url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'icomoon';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"]:before {
*/
.icon-facebook:before, .icon-twitter:before, .icon-google-plus:before {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-facebook:before {
	content: "\e000";
}
.icon-twitter:before {
	content: "\e001";
}
.icon-google-plus:before {
	content: "\e002";
}
View Compiled
/*var flags = {
  name: false,
  password: false
};

jQuery(document).ready(function () {
  jQuery('input#name').keyup(function () {
    var $this = jQuery(this);
    if ($this.val() != '')
    {
      flags.name = true;
    }
    else
    {
      flags.name = false;
    }
    check_flags();
  })

  jQuery('input#pword').keyup(function () {
    var $this = jQuery(this);
    if ($this.val() != '')
    {
      flags.name = true;
    }
    else
    {
      flags.name = false;
    }
    check_flags();
  })
})
  
function check_flags()
{
  if (flags.name && flags.password)
  {
    jQuery('button#submit').addClass('valid');
    return;
  }
}*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js