Hoe te maken: sociale loginformulier
- Tutorials: Previous page
- Next page Registration form
Leer hoe je een sociale loginformulier maakt met CSS.
Responsief sociale loginformulier
Hoe een sociale loginformulier te maken
Stap 1 - Voeg HTML toe:
Gebruik het <form> element om invoer te verwerken. Meer informatie hierover vind je in onze PHP tutorial.
Voeg voor elk veld een invoercontrole of een sociale mediakoppeling toe:
<div class="container"> <form action="/action_page.php"> <div class="row"> <h2 style="text-align:center">Login with Social Media or Manually</h2> <div class="vl"> <span class="vl-innertext">or</span> </div> <div class="col"> <a href="#" class="fb btn"> <i class="fa fa-facebook fa-fw"></i> Login with Facebook </a> <a href="#" class="twitter btn"> <i class="fa fa-twitter fa-fw"></i> Login with Twitter </a> <a href="#" class="google btn"> <i class="fa fa-google fa-fw"></i> Login with Google+ </a> </div> <div class="col"> <div class="hide-md-lg"> <p>Of meld je handmatig aan:</p> </div> <input type="text" name="username" placeholder="Gebruikersnaam" required> <input type="password" name="password" placeholder="Wachtwoord" required> <input type="submit" value="Inloggen"> </div> </div> </form> </div> <div class="bottom-container"> <div class="row"> <div class="col"> <a href="#" style="color:white" class="btn">Aanmelden</a> </div> <div class="col"> <a href="#" style="color:white" class="btn">Wachtwoord vergeten?</a> </div> </div> </div>
Tweede stap - Voeg CSS toe:
* {box-sizing: border-box} /* Stel de stijl van de container in */ .container { position: relative; border-radius: 5px; background-color: #f2f2f2; padding: 20px 0 30px 0; } /* Stel de stijl van de invoervelden en linkknoppen in */ input, .btn { width: 100%; padding: 12px; border: none; border-radius: 4px; margin: 5px 0; opacity: 0.85; display: inline-block; font-size: 17px; line-height: 20px; text-decoration: none; /* Verwijder de onderstreping van de anker */ } input:hover, .btn:hover { opacity: 1; } /* Voeg de juiste kleuren toe aan de knoppen van Facebook, Twitter en google */ .fb { background-color: #3B5998; color: white; } .twitter { background-color: #55ACEE; color: white; } .google { background-color: #dd4b39; color: white; } /* Set style for submit button */ input[type=submit] { background-color: #04AA6D; color: white; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } /* Two-column layout */ .col { float: left; width: 50%; margin: auto; padding: 0 50px; margin-top: 6px; } /* Clear float after columns */ .row:after { content: ""; display: table; clear: both; } /* Vertical line */ .vl { position: absolute; left: 50%; transform: translate(-50%); border: 2px solid #ddd; height: 175px; } /* Text inside the vertical line */ .inner { position: absolute; top: 50%; transform: translate(-50%, -50%); background-color: #f1f1f1; border: 1px solid #ccc; border-radius: 50%; padding: 8px 10px; } /* Hide some text on medium and large screens */ .hide-md-lg { display: none; } /* Bottom container */ .bottom-container { text-align: center; background-color: #666; border-radius: 0px 0px 4px 4px; } /* Responsive layout - when screen width is less than 650px, stack two columns vertically instead of horizontally */ @media screen and (max-width: 650px) { .col { width: 100%; margin-top: 0; } /* Hide vertical line */ .vl { display: none; } /* In small screens, show hidden text */ .hide-md-lg { display: block; text-align: center; } }
Try it yourself
Related pagesHTML form
Related pagesCSS form
- Tutorials: Previous page
- Next page Registration form