Learn how to create a social media login form with CSS. Responsive Social Login FormTry it Yourself » How To Create a Social Login FormStep 1) Add HTML:Use a <form> element to process the input. You can learn more about this in our PHP tutorial. Then add inputs or social media links for each field: Example<div class="container"> <div class="col"> <div class="col"> <input type="text" name="username" placeholder="Username" required> </div> <div class="bottom-container"> Step 2) Add CSS:Example* {box-sizing: border-box} /* style the container */ /* style inputs and link buttons */ input:hover, /* add appropriate colors to fb, twitter and google buttons */ .twitter { .google { /* style the submit button */ input[type=submit]:hover { /* Two-column layout */ /* Clear floats after the columns */ /* vertical line */ /* text inside the vertical line */ /* hide some text on medium and large screens */ /* bottom container */ /* Responsive layout - when the screen is
less than 650px wide, make the two columns stack on top of each other instead of next to each other */ Try it Yourself » Tip: Go to our HTML Form Tutorial to learn more about HTML Forms. Tip: Go to our CSS Form Tutorial to learn more about how to style form elements. |