FB - Facebook Login Button

by Paulo Ávila

HTML

<table class="button" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td>
            <span class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 216"><path fill="white" d=" M204.1 0H11.9C5.3 0 0 5.3 0 11.9v192.2c0 6.6 5.3 11.9 11.9 11.9h103.5v-83.6H87.2V99.8h28.1v-24c0-27.9 17-43.1 41.9-43.1 11.9 0 22.2.9 25.2 1.3v29.2h-17.3c-13.5 0-16.2 6.4-16.2 15.9v20.8h32.3l-4.2 32.6h-28V216h55c6.6 0 11.9-5.3 11.9-11.9V11.9C216 5.3 210.7 0 204.1 0z"></path></svg>
            </span>
          </td>
          <td>
            <span class="label">Log In</span>
          </td>
        </tr>
      </tbody>
    </table>

CSS

.button {
  cursor: pointer;
  user-select: none;
  height: 22px;
  background-color: ;
  background: linear-gradient(#4c69ba, #3b55a0);
  border-color: #4c69ba;
  border-radius: 2px;
}
.button:hover {
  background: linear-gradient(#5b7bd5, #4864b1);
  border-bottom-color: #365899;
  border-left-color: #4961a8;
  border-right-color: #4961a8;
  border-top-color: #5874c3;
  box-shadow: inset 0 1px 0 #607fd6;
}
.icon {
  margin: 3px 0 0 3px;
}
.icon svg {
  height: 16px;
}
.label {
  padding: 2px 6px;
  font-family: "Helvetica neue";
  font-size: 11px;
  font-weight: bold;
  line-height: 14px;
  color: #fff;
  text-shadow: 0 -1px 0 #354c8c;
}

td {
  padding: 0;
  line-height: 22px;
}