Facebook login button in CSS

by Craig Haywood

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive login form with social media login buttons</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>

</head>
<body>
<div class="dimmer">
<div class="centered">
<div class="Social">
<img style="right: -18px; top: -18px; position: absolute" src="https://www.bestincomesecret.com/img/xclose.png"/>
  <div style="text-align: center"><img style="max-width: 452px; width: 100%; height: auto" src="https://www.bestincomesecret.com/img/fgt.png"/></div>
  <label style="color: #fff">Email Address:</label><br/>
  <input placeholder="Email" type="text"/>

<button type="submit" class="submit-btn">
<i class="fa fa-download" aria-hidden="true"></i> Download the Hacks
</button>
  <div style="text-align: center; color: #fff; width: 100%; padding-bottom: 10px"> OR . . .</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 Google
</button>
  <button type="submit" class="twitter-btn">
<i class="fa fa-twitter" aria-hidden="true"></i> Continue with Twitter
</button>
</div> <hr/>
  <div style="color: #fff; text-align: center; font-size: smaller">
    * we will not spam, rent, or sell your information... *
   <br/>
    <a style="color:orange" href="https://www.bestincomesecret.com/terms.html">Terms</a> | <a style="color:orange" href="https://www.bestincomesecret.com/privacy.html">Privacy</a>
    </div>
  </div>
  </div>

</body>
</html>

CSS

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 500px;
  width: 100%;
  background: #333;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid #000;
}

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

body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

}
* {
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;

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.8;
}
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;
}
.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: orange;

}
.Social {

}
.Social button i {
margin-right: 5px;
font-size: 20px;
}
@media (max-width: 1000px) {
form {
width: 100%;
margin-left: 0px;
}
}