.btn-fb-login {
  width: 100%;
  max-width: 300px;
  margin: auto;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ4NmJiNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzNGU4NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #486bb5), color-stop(100%, #334e87));
  background-image: -moz-linear-gradient(top, #486bb5 0%, #334e87 100%);
  background-image: -webkit-linear-gradient(top, #486bb5 0%, #334e87 100%);
  background-image: linear-gradient(to bottom, #486bb5 0%, #334e87 100%);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.btn-fb-login:hover {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ4NmJiNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIzM2I2YyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #486bb5), color-stop(100%, #233b6c));
  background-image: -moz-linear-gradient(top, #486bb5 0%, #233b6c 100%);
  background-image: -webkit-linear-gradient(top, #486bb5 0%, #233b6c 100%);
  background-image: linear-gradient(to bottom, #486bb5 0%, #233b6c 100%);
}
.btn-fb-login .icon {
  background: url(https://s.cdpn.io/6035/fb_login_sprite.png) no-repeat;
  width: 11px;
  height: 22px;
  display: inline-block;
  float: left;
  margin: 7px 10px;
}
.btn-fb-login .title {
  font-size: 0.8125em;
  color: #fff;
  line-height: 40px;
  /* float: left; */
  padding: 0 50px;
  letter-spacing: 1px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.3);
}

.fb-login {
  display: none;
  width: 100%;
  margin-top: 20px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ4NmJiNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzNGU4NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #486bb5), color-stop(100%, #334e87));
  background-image: -moz-linear-gradient(top, #486bb5 0%, #334e87 100%);
  background-image: -webkit-linear-gradient(top, #486bb5 0%, #334e87 100%);
  background-image: linear-gradient(to bottom, #486bb5 0%, #334e87 100%);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.2), 0 0 25px rgba(0, 0, 0, 0.3);
}