How to create a social media login form with CSS?

CSS Web Development Front End Technology

On a login page, you must have seen login form enter the username and password to login. However, nowadays, social media buttons are also visible to login using Facebook, Twitter, Gmail, etc. We can easily design such forms using CSS. For that, you need to also set the social media icons. Let us see how to create a social media login form with CSS.

Set the CDN for the social media icons

To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page using the <link> element −

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />

Set the form fields

A form on a web page is created using the <form>. Withing that, set the input fields for the username/email-id and password with a login button −

<input
   type="email"
   placeholder="Username or email id"
   name="username"
   required
/>
<input
   type="password"
   placeholder="Enter password"
   name="pass"
   required
/>
<button type="submit">Login</button>

Create the social media buttons

The social media buttons can be just like any other button, but you need to set the icons as well. In the beginning of the web page, we have set the Font Awesome icons, therefore it would be now easier for us to include the icons −

<div class="Social">
   <button type="submit" class="twitter-btn">
      <i class="fa fa-twitter" aria-hidden="true"></i> Login with Twitter
   </button>
   <button type="submit" class="facebook-btn">
      <i class="fa fa-facebook" aria-hidden="true"></i> Login with Facebook
   </button>
</div>

Style the form and input buttons

Here, we have set the width for the form as well as the input fields. The width for the fields is set to to 100%. The border radius is set using the border-radius property −

form {
   border: 1px solid rgb(182, 180, 180);
   padding: 20px;
   width: 800px;
   margin-left: 20%;
}
input {
   width: 100%;
   border: 1px solid #ddd;
   padding: 5px 10px;
   height: 45px;
   margin: 0px 0px 20px;
   border-radius: 4px;
   box-sizing: border-box;
   font-size: 17px;
}

Checkbox

A checkbox is also set for the Remember Me section on a login form −

<label class="Remember"><input type="checkbox" name="remember" />Remember me</label>

The checkbox is styled like this −

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

Style the social media buttons

We have shown the Facebook and Twitter social media buttons here. A width of 100% is set for boty the buttons with different background colors −

.Social button.twitter-btn,
.Social button.facebook-btn {
   width: 100%;
   font-size: 18px;
   margin: 0px 0px 10px;
}
.Social button.twitter-btn {
   background-color: #26abfd;
}
.Social button.facebook-btn {
   background-color: #3f68be;
}

Example

The following is the code to create a social media login form using CSS −

<!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"/>
   <style>
      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;
         padding: 5px 10px;
         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: 10px 30px;
         background-color: #4caf50;
         border: none;
         color: #fff;
         border-radius: 4px;
         cursor: pointer;
      }
      button:hover {
         opacity: 0.8;
      }
      input[type="checkbox"] {
         height: 16px;
         width: 16px;
         margin-right: 5px;
         float: left;
      }
      .Social button.twitter-btn,
      .Social button.facebook-btn {
         width: 100%;
         font-size: 18px;
         margin: 0px 0px 10px;
      }
      .Social button.twitter-btn {
         background-color: #26abfd;
      }
      .Social button.facebook-btn {
         background-color: #3f68be;
      }
      .Social {
         border-top: 1px solid #ddd;
         padding-top: 30px;
         margin-top: 30px;
      }
      .Social button i {
         margin-right: 5px;
         font-size: 20px;
      }
      @media (max-width: 1000px) {
         form {
            width: 100%;
            margin-left: 0px;
         }
      }
   </style>
</head>
<body>
   <h1>Social Media Login Form example</h1>
   <form>
      <input
         type="email"
         placeholder="Username or email id"
         name="username"
         required
      />
      <input
         type="password"
         placeholder="Enter password"
         name="pass"
         required
      />
      <button type="submit">Login</button>
      <label class="Remember"><input type="checkbox" name="remember" />Remember me</label>
      <span class="forgotPass">Forgot password?</span>
      <div class="Social">
         <button type="submit" class="twitter-btn">
            <i class="fa fa-twitter" aria-hidden="true"></i> Login with Twitter
         </button>
         <button type="submit" class="facebook-btn">
            <i class="fa fa-facebook" aria-hidden="true"></i> Login with Facebook
         </button>
      </div>
   </form>
</body>
</html>

AmitDiwan

Updated on: 14-Dec-2023

972 Views

Kickstart Your Career

Get certified by completing the course

Get Started