This post contains a total of 5+ Hand-Picked CSS Twitter Login Page Examples with Source Code. All these Twitter Login Pages are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Twitter Login Page Examples
1. By Volkan Yildiz
Made by Volkan Yildiz. Minimalistic Twitter Login Page. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
:root {
--blue: rgb(29, 161, 242);
--blue-hover: rgb(26, 145, 218);
--blue-pressed: rgb(23, 129, 194);
}
* {
padding: 0;
margin: 0;
list-style: none;
border: none;
text-decoration: none;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
background-color: rgb(21,32,43);
color: #fff;
}
h1 {
font-size: 23px;
}
.container {
display: grid;
place-items: center;
margin: 0 auto;
width: 30%;
}
.twitter-logo {
height: 36px;
width: 36px;
fill: #fff;
margin: 20px 0;
}
.form-element {
display: flex;
flex-direction: column-reverse;
margin-top: 40px;
width: 100%;
}
.form-element label {
color: rgb(136, 153, 166);
}
.form-element input {
padding: 2px 0 5px 0;
background: transparent;
width: 100%;
font-size: 19px;
color: #fff;
border-bottom: 2px solid gray; /* borderdaki radius'u yaparsın sen */
}
.form-element input:focus {
outline: none;
border-bottom-color: var(--blue);
}
input:focus + div label {
color: var(--blue);
}
.form-element .btn {
font-size: 15px;
font-weight: bold;
line-height: 19.6px;
padding: 15px 30px;
border-radius: 30px;
cursor: pointer;
outline: none;
}
.form-element .btn.btn-blue {
background-color: var(--blue);
color: #fff;
}
.form-element .btn.btn-blue:hover {
background-color: var(--blue-hover);
}
.form-element .btn.btn-blue:active {
background-color: var(--blue-pressed);
}
</style>
</head>
<body>
<div class="container">
<div class="twitter-logo">
<svg viewBox="0 0 24 24" class="r-jwli3a r-4qtqp9 r-yyyyoo r-j66t93 r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>
</div>
<h1>Twitter Login</h1>
<div class="form-element">
<input type="text" id="account_identifier" class="form-input">
<div>
<label for="account_identifier">Text</label>
</div>
</div>
<div class="form-element">
<input type="text" id="account_identifier" class="form-input">
<div>
<label for="account_identifier">test</label>
</div>
</div>
<div class="form-element">
<button class="btn btn-blue">Log In</button>
</div>
</div>
</body>
</html>2. By Janet
Made by Janet. Twitter CSS Login Page Clone. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
@import
url("https://fonts.googleapis.com/css?family=Prompt");
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body,html{
width:100vw;
height:100%;
font-family: sans-serif;
overflow-x:hidden;
}
#login-button, #sign-up, #login{
font-family: "Prompt";
letter-spacing:1px;
}
.main-container{
display:flex;
height:100vh;
width:100vw;
}
.left, .right{
flex:1;
height:100%;
}
.left{
display:flex;
align-items:center;
justify-content:center;
background: url('http://1000logos.net/wp-content/uploads/2017/06/Twitter-Logo.png') no-repeat, #25aafc;
background-position:30% 50%;
}
.icon{
color:#fff;
font-family:FontAwesome;
font-size:2em;
display:inline-block;
}
.search::before{
content:'\f002';
font-family:FontAwesome;
}
.chat::before{
content:'\f0e5';
font-family:FontAwesome;
}
.group::before{
content:'\f0c0';
font-family:FontAwesome;
}
.communication-box{
display:flex;
flex-direction:column;
}
.message{
margin:1em;
display:flex;
align-items:center;
}
/*RIGHT SIDE*/
.right input,
#login-button{
padding:1em;
}
.username,
.password{
padding:0 .5em;
}
.left p {
display:inline-block;
margin:0 1em;
color:#fff;
font:bold 1.1em/1 "Helvetica";
}
.right{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:1;
}
.login-form{
position:absolute;
top:20px;
display:flex;
}
.right input{
border:1px solid rgba(0,0,0,.08);
color:#aaa;
}
.right input:focus{
border:1px solid #47b8ff;
}
.right input:focus::placeholder{
color:#aaa;
}
.forgot-pass{
display:block;
margin:5px 0 0 0;
}
.forgot-pass a{
text-decoration:none;
font-size:.9em;
color:#aaa;
}
.forgot-pass a:hover{
text-decoration:underline;
}
#login-button{
align-self:flex-start;
border-radius:100px;
border:1px solid #25aafc;
background-color:#fff;
font-weight:bold;
color:#1f98e2;
line-height:1.3em;
cursor:pointer;
transition: all .2s ease-in-out;
}
#login-button:hover{
background-color:rgba(36, 164, 242, .1);
}
.join-box{
max-width:350px;
}
.bird::before{
content:"\f099";
font-family:FontAwesome;
color: #25aafc;
font-size:1.5em;
}
.bird{
margin:0 0 .3em 0;
}
.join-box h1{
font-size:1.7em;
margin:0 0 1.5em 0;
}
.join-box h2{
font-size:1.2em;
padding:1em 0;
}
#sign-up, #login{
width:100%;
padding:.7em;
margin:.5em 0;
border-radius:100px;
border:none;
font-weight:bold;
cursor:pointer;
}
#sign-up{
background-color:#25aafc;
color:#fff;
}
#login{
background-color:#fff;
border:1px solid #25aafc;
color:#25aafc;
}
/*FOOTER*/
footer{
border-top:1px solid #ccc;
padding:1em;
width:100%;
background-color:#fff;
}
footer a, footer p{
color:#bbb;
font-size:.8em;
text-align:center;
}
.footer-content{
display:table;
margin:0 auto;
}
footer p{
display:inline;
}
footer a{
text-decoration:none;
margin:0 .4em;
}
footer a:hover{
text-decoration:underline;
}
@media screen and (max-width:1000px),
screen and (max-height:500px){
.login-form{
display:none;
}
}
@media screen and (max-width:770px){
.main-container{
display:block;
position:relative;
height:100%;
}
footer{
position:absolute;
bottom:0;
}
}
</style>
</head>
<body>
<div class = "main-container">
<div class = "left">
<div class = "communication-box">
<div class = "message"><span class = "icon search"></span><p>Follow your interests.</p></div>
<div class = "message"><span class = "icon group"></span><p>Hear what people are talking about</p></div>
<div class = "message"><span class = "icon chat"></span><p>Join the conversation.</p></div>
</div>
</div>
<div class = "right">
<div class = "login-form">
<div class = "username">
<input type="text" placeholder = "Phone, email, or username">
</div>
<div class = "password">
<input type="password" placeholder = "Password">
<span class = "forgot-pass"><a href = "#">Forgot password?</a></span></div>
<button id = "login-button">Log in</button>
</div>
<div class = "join-box">
<span class = "icon bird"></span>
<h1>See what's happening in the world right now</h1>
<h2>Join Twitter today.</h2>
<div class = "signup-login">
<button id = "sign-up">Sign Up</button>
<button id = "login">Log in</button>
</div>
</div>
</div>
</div>
<footer>
<div class = "footer-content">
<a href="#">About</a>
<a href="#">Help Center</a>
<a href="#">Blog</a>
<a href="#">Status</a>
<a href="#">Jobs</a>
<a href="#">Terms</a>
<a href="#">Privacy Policy</a>
<a href="#">Cookies</a>
<a href="#">Ads info</a>
<a href="#">Brand</a>
<a href="#">Apps</a>
<a href="#">Advertise</a>
<a href="#">Marketing</a>
<a href="#">Businesses</a>
<a href="#">Developers</a>
<a href="#">Directory</a>
<a href="#">Settings</a>
<p>© 2018 Twitter</p>
</div>
</footer>
</body>
</html>3. By anas alpure
Made by anas alpure. Classic Twitter Login Page. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
box-sizing: border-box;
}
html{
font-family: Arial, Helvetica, sans-serif;
}
body{
margin: 0;
}
.twitter-login-box {
max-width: 600px;
margin: 20px auto;
}
.twitter-login-box header img{
width: 70px;
}
.twitter-login-box header{
text-align: center;
}
.input-wrapper{
margin-bottom: 15px;
}
.input-wrapper label,
.input-wrapper input{
width: 100%;
display: block;
}
.input-wrapper input{
border: none;
background-color: #eee;
padding: 10px;
font-size: 20px;
border-bottom: 3px solid #6a6a6a;
}
.input-wrapper input[type="password"]{
border-bottom: 3px solid red;
}
.input-wrapper input:focus{
outline: none;
}
.input-wrapper label{
background-color: #eee;
padding: 10px;
color: #6a6a6a;
}
.twitter-btn{
background-color: #33b3ee;
border: none;
width: 100%;
padding: 15px;
border-radius: 30px;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.twitter-login-box .footer{
text-align: center;
margin-top: 20px;
color: #33b3ee;
}
.twitter-login-box .footer a{
color: #33b3ee;
text-decoration: none;
}
</style>
</head>
<body>
<div class="twitter-login-box">
<header>
<img src="https://static01.nyt.com/images/2014/08/10/magazine/10wmt/10wmt-jumbo-v4.jpg?quality=90&auto=webp" alt="twitter logo">
<h1>Login To Twitter</h1>
</header>
<form>
<div class="input-wrapper">
<label for="user-name-id">Phone, Email or Username</label>
<input type="text" name="username" id="user-name-id">
</div>
<div class="input-wrapper">
<label for="password-id">Password</label>
<input type="password" name="password" id="password-id">
</div>
<button class="twitter-btn">Log in</button>
</form>
<div class="footer">
<a href="#">Forget Password</a> .
<a href="#">Sign up to twitter</a>
</div>
</div>
</body>
</html>4. By Piyush Jatola
Made by Piyush Jatola. Twitter Login Page with Tailwind CSS. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
<style>
.bg {
background-color: rgb(29, 161, 242);
}
.bg:hover {
background-color:#1a91da!important;
}
.border {
border: 1px solid rgb(29, 161, 242);
}
.border:hover {
background-color:#e8f5fe!important;
}
.text {
color: rgb(29, 161, 242);
}
</style>
</head>
<body>
<!-- ... -->
<div class="flex w-full">
<div class="mb-4">
<img src="https://abs.twimg.com/sticky/illustrations/lohp_en_850x623.png" alt="Twitter" style="width:100%;height:540px;">
<img src="https://pngimg.com/uploads/twitter/small/twitter_PNG15.png" alt="Twitter" style="position: absolute;left: 20%;top: 25%;">
</div>
<div class="px-10 py-16" style="width:50%">
<div><img src="https://www.creativefreedom.co.uk/wp-content/uploads/2017/06/Twitter-logo-2012.png" alt="Twitter Logo" class="w-12 mb-16"></div>
<p class="text-6xl font-black mb-12">Happening now</p>
<p class="text-4xl font-bold mb-12">Join Twitter today.</p>
<button class="bg block w-80 rounded-full py-3 text-white mb-5">Sign up</button>
<button class="w-80 rounded-full py-3 border text font-bold">Log in</button>
</div>
</div>
<div class="text-center mb-2">
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">About</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Help Center</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Terms of Service</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Privacy Policy</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Cookie Policy</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Ads info</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Blog</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Status</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Careers</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Brand Resources</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Advertising</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Marketing</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Twitter for Business</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Developers</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Directory</a></span>
<span><a href="#" class="mx-1 text-sm hover:underline text-gray-500">Settings</a></span>
</div>
<p class="text-center text-gray-500 text-sm mb-4">© 2021 Twitter, Inc.</p>
</body>
</html>5. By Atul
Made by Atul. Old Twitter Login page Clone. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap" rel="stylesheet">
<style>
* {
padding: 0px;
margin: 0px;
}
body {
background-color: rgba(0, 172, 238, 0.6);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
height: 400px;
width : 690px;
background: white;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
position: absolute;
}
.box::before {
content: "";
width: 270px;
height: 100%;
background: #00acee;
position: absolute;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
}
.bi-twitter {
position: absolute;
font-size: 180px;
margin-top: 25px;
margin-left: 50px;
color: rgba( 255, 255, 255, 0.4);
}
.head {
font-family: 'poppins', sans-serif;
position: absolute;
color: white;
}
.head p {
margin-top: 280px;
margin-left: 29px;
}
.head button {
width: 200px;
height: 35px;
font-family: 'poppins', sans-serif;
background-color: transparent;
border: 1px solid white;
color: white;
border-radius: 30px;
margin-top: 20px;
margin-left: 30px;
transition : all 1s ease;
}
.head button:hover {
background-color: white;
border: none;
color: #00acee;
}
.content h2 {
font-family: 'poppins', sans-serif;
position: absolute;
margin-left: 300px;
margin-top: 40px;
font-size: 29px;
}
input {
position: absolute;
font-family: 'poppins', sans-serif;
width: 340px;
height: 30px;
border: 1px solid grey;
padding-left: 10px;
color: grey;
}
#inp1 {
margin-top: 200px;
margin-left: 300px;
}
#inp2 {
margin-top: 250px;
margin-left: 300px;
}
.content button {
position: absolute;
margin-top: 300px;
margin-left: 300px;
width: 150px;
height: 35px;
border: none;
border-radius: 30px;
background-color: #00acee;
font-family: 'poppins', sans-serif;
color: white;
transition: all 1s ease;
}
.content button:hover {
background: transparent;
border: 1px solid #00acee;
color: #00acee;
}
</style>
</head>
<body>
<div class="box">
<i class="bi bi-twitter"></i>
<div class="head">
<p>Already have an account ?</p>
<button>Log In</button>
</div>
<div class="content">
<h2>Join Twitter today and start exploring the world's thoughts.</h2>
<input type="text" placeholder="Your full name" id="inp1">
<input type="text" placeholder="Your email address or Phone number" id="inp2">
<button>Continue</button>
</div>
</div>
</body>
</html>6. By Shubham Singh Rajput
Made by Shubham Singh Rajput. Dark themed CSS Twitter Signin Page. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0px;
margin:0px;
}
body{
background-color: rgb(44, 44, 44);
}
.container{
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.card{
height: 600px;
width: 600px;
background-color: black;
border-radius: 50px;
text-align: center;
}
.container .logo1{
height: auto;
width: 600px;
text-align: center;
}
.container .logo{
height: 75px;
width: 75px;
padding: 50px 0px;
}
.container h3{
color: white;
font-weight: bolder;
margin: 10px;
font-size: 28px;
}
.login{
display: flex;
align-items: center;
justify-content: center;
margin: 15px;
}
.log{
height: 20px;
width: 20px;
margin: 5px;
}
button{
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 280px;
font-weight: bold;
border-radius: 30px;
}
button:hover{
cursor: pointer;
background: rgb(216, 216, 216);
}
h6{
width: 100%;
margin: 20px 0px;
text-align: center;
color: white;
font-size: 20px;
border-bottom: 1px solid rgb(87, 87, 87);
line-height: 0.1em;
}
h6 span{
padding: 0px 10px;
background: rgb(0, 0, 0);
}
input{
height: 45px;
width: 280px;
color: white;
margin: 10px;
background: transparent;
border-radius: 5px;
border: 1px solid white;
text-align: center;
}
p{
color: white;
margin: 5px;
}
p a{
text-decoration: none;
color: rgb(160, 160, 233);
}
.forgot{
background: transparent;
color: white;
border: 1px solid white;
}
.forgot:hover{
background: rgb(49, 42, 42);
}
@media screen and (max-width: 650px){
.container{
background: black;
border-radius: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="logo1">
<img src="https://freepngimg.com/thumb/twitter/6-2-twitter-png-image.png" alt="" class="logo">
</div>
<h3>Sign in to Twitter</h3>
<div class="login">
<button>
<img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" alt="Apple Logo" class="log">
Sign in with Google
</button>
</div>
<div class="login">
<button>
<img src="https://www.freepnglogos.com/uploads/mac-cosmetic-png-logo/infinite-island-apple-emblem-mac-cosmetic-png-logo-10.png" alt="Google Logo" class="log">
Sign in with Apple
</button>
</div>
<h6><span>or</span></h6>
<input type="text" placeholder="Phone, email, or username" required>
<div class="login">
<button>
Next
</button>
</div>
<div class="login">
<button class="forgot">
Forgot passwod?
</button>
</div>
<p>
Don't have an account? <a href="#">Sign up</a>
</p>
</div>
</div>
</body>
</html>