Facebook login button in CSS

by Himanshu Joshi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="button-parent">
  <!-- <a href="" class="fb connect">Sign in with Facebook</a>
  <a href="" class="bottom">Sign in with Facebook</a>-->
  <div class="button-child top">
    <i class="fa fa-facebook-square fa-3" aria-hidden="true"></i>
    <span class="button-child-content">Sign in with Facebook</span>
  </div>
  <div class="button-child bottom">
    <i class="fa fa-facebook-square fa-3" aria-hidden="true"></i>
    <span class="button-child-content">Sign in with Facebook</span>
  </div>
</div>

CSS

.button-parent {
  position: relative;
}

.button-parent .button-child {
  font-family: Lucida Grande, Helvetica Neue, Helvetica, Arial, sans-serif;
  display: inline-block;
  font-size: 14px;
  padding: 13px 30px 15px 44px;
  background: #1d82e1;
  color: #fff;
  // text-shadow: 0 -1px 0 rgba(0,0,20,.4);
  text-decoration: none;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.button-parent .bottom {
  position: absolute;
  top: 2px;
  left: 2px;
}

.button-parent .button-child-content {
  padding-left: 10px;
}

//- ends
.button-parent .bottom {
  display: inline-block;
  padding: 13px 30px 15px 44px;
  background: #1d82e1;
  position: absolute;
  color: #3A5A97;
  left: 2px;
  top: 1px;
}

a.fb {
  font-family: Lucida Grande, Helvetica Neue, Helvetica, Arial, sans-serif;
  display: inline-block;
  font-size: 14px;
  padding: 13px 30px 15px 44px;
  background: #1d82e1;
  color: #fff;
  // text-shadow: 0 -1px 0 rgba(0,0,20,.4);
  text-decoration: none;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.connect:before {
  display: inline-block;
  position: relative;
  background-image:...