JSFiddle - React, Tailwind, and code Playground

Social Login Buttons

by Jennifer Perrin

HTML

<div class='section'>
    <div class='socialInner'> <a class='socialBtn facebook'>
      login
      <span>
        with facebook
      </span>
    </a>
 <a class='socialBtn twitter'>
      login
      <span>
        with twitter
      </span>
    </a>
 <a class='socialBtn googlePlus'>
      login
      <span>
        with google+
      </span>
    </a>

    </div>
</div>
<div class='section'>
    <div class='socialInner'> <a class='socialBtn facebook reverse'>
      login
      <span>
        with facebook
      </span>
    </a>
 <a class='socialBtn twitter reverse'>
      login
      <span>
        with twitter
      </span>
    </a>
 <a class='socialBtn googlePlus reverse'>
      login
      <span>
        with google+
      </span>
    </a>

    </div>
</div>
<div class='section'>
    <div class='socialInner'> <a class='socialBtn facebook naked'>
      login
      <span>
        with facebook
      </span>
    </a>
 <a class='socialBtn twitter naked'>
      login
      <span>
        with twitter
      </span>
    </a>
 <a class='socialBtn googlePlus naked'>
      login
      <span>
        with google+
      </span>
    </a>

    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700);
@import url("http://weloveiconfonts.com/api/?family=entypo");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:before, :after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background: #ddd;
}

.socialInner {
  width: 780px;
  margin: 0 auto;
}

.socialInner a {
  float: left;
  margin: 45px 25px 0;
}

.socialBtn {
  position: relative;
  display: block;
  width: 210px;
  height: 40px;
  padding: 0 0 0 55px;
  font: 700 16px/40px 'Quattrocento Sans', sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  color: #555;
  background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
  cursor: pointer;
}

.socialBtn span {
  font-size: 14px;
  text-transform: none;
  color: #aaa;
}

.socialBtn:before {
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  font: 20px/40px entypo;
  text-align: center;
  color: #fff;
}

.socialBtn.facebook:before {
  content: '\f30c';
  background: linear-gradient(to bottom, #4477cc 0%, #2f5fae 100%);
}

.socialBtn.twitter:before {
  content: '\f309';
  background: linear-gradient(to bottom, #00ccff 0%, #00a3cc 100%);
}

.socialBtn.googlePlus:before {
  content: '\f30f';
  background: linear-gradient(to bottom, #dd4433 0%, #bd2f20 100%);
}

.socialBtn:hover {
  text-shadow: 0 0 10px #fff;
}

/* reverse */
.socialBtn.reverse {
  color: #fff;
}

.socialBtn.reverse span {
  color: #eee;
}

.socialBtn.facebook.reverse {
  background: linear-gradient(to bottom, #4477cc 0%, #2f5fae 100%);
}

.socialBtn.twitter.reverse {
  background: linear-gradient(to bottom, #00ccff 0%, #00a3cc 100%);
}

.socialBtn.googlePlus.reverse {
  background: linear-gradient(to bottom, #dd4433 0%, #bd2f20 100%);
}

.socialBtn.reverse:before {
  color: #555;
  background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
}

/* naked */
.socialBtn.naked:before {
  border-right: 1px solid...