Facebook login button in CSS

by Craig Haywood

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button onclick="ToggleOn()">Try it</button>
<! -- Optin Start -->
  <! -- Paste just before end body tag -->
    <div id="mydimmer" class="dimmer">
      <div class="centered">
        <div class="Social">
          <img onclick="ToggleOff()" style="right: 2px; top: 2px; position: absolute;cursor: pointer;" src="https://www.bestincomesecret.com/img/closered.png" />
          <div style="margin-top: 10px;text-align: center; font-size: larger"><strong>Complete the form below or . . .<br /> Continue with <span style="color: #3f68be; font-family: 'Klavika Bd';">facebook</span>, <span style="color: #4285f4; font-family: 'Product Sans';">G</span><span style="color: #ea4335; font-family: 'Product Sans';">o</span><span style="color: #fbbc05; font-family: 'Product Sans';">o</span><span style="color: #4285f4; font-family: 'Product Sans';">g</span><span style="color: #34a853; font-family: 'Product Sans';">l</span><span style="color: #ea4335; font-family: 'Product Sans';">e</span> or <span style="color: #26abfd;  font-family: 'PicoBlackAl';">twitter</span></strong><br /><br /></div>
          <label>Email Address:</label><br />
          <input placeholder=" Email" id="email" type="text" />

          <button type="submit" class="submit-btn">
            <i class="fa fa-download" aria-hidden="true"></i> Download the Hacks
          </button>
          <div style="color: #ff003e; text-align: center; width: 100%; padding-bottom: 10px; text-shadow: rgb(0, 0, 0) 1px 1px 0px;"><strong>Or you can also . . .</strong></div>
          <button type="submit" class="facebook-btn">
            <i class="fa fa-facebook" aria-hidden="true"></i> Continue with Facebook
          </button>
          <button type="submit" class="google-btn">
            <i> <img style="vertical-align:middle" src="https://developers.google.com/identity/sign-in/g-normal.png" /></i> Continue with...

CSS

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 500px;
  width: 100%;
  background: #fff;

  border-radius: 10px;
  border: 2px solid #000;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.dimmer {
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  top: 0;
  left: 0;
  position: absolute;
  z-index: 999;
  display: none;
}


}

* {
  box-sizing: border-box;
}

h1 {
  text-align: center;
}

form {
  border: 1px solid rgb(182, 180, 180);
  padding: 20px;
  width: 800px;
  margin-left: 20%;
}

input {
  width: 100%;
  border: 1px solid #ddd;
  background: rgba(255, 255, 0, 0.6);
  height: 45px;
  margin: 0px 0px 20px;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 17px;
}

button {
  margin: 10px auto 30px;
  display: table;
  font-size: 20px;
  padding: 5px 30px;
  background-color: #4caf50;
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

button.twitter-btn,
button.facebook-btn,
button.submit-btn {
  padding: 10px 30px;
}

button:hover {
  opacity: 0.85;
}

input[type="checkbox"] {
  height: 16px;
  width: 16px;
  margin-right: 5px;
  float: left;
}

.Social button.twitter-btn,
.Social button.google-btn,
.Social button.facebook-btn,
.Social button.submit-btn {
  width: 100%;
  margin: auto;
  font-size: 18px;
  margin: 0px 0px 10px;
  border: 2px solid black
}

.Social button.twitter-btn {
  background-color: #26abfd;
}

.Social button.facebook-btn {
  background-color: #3f68be;
}

.Social button.google-btn {
  background-color: #fff;
  color: #000;
}

.Social button.submit-btn {
  background-color: #ff003e;

}

.Social {
  margin-left: 30px;
  margin-right: 30px;
}

.Social button i {
  margin-right: 5px;
  font-size: 20px;
}

@media (max-width: 1000px) {
  form {
    width: 100%;
    margin-left: 0px;
  }
}

@font-face {
  font-family: 'PicoBlackAl';
  src: local('PicoBlackAl'),
   ...