Creating Twitter Like Follow Style Button With Pure CSS

Admin 18:17
Creating twitter like follow style with pure css, So you will easily learn how to make twitter follow button with page, hopefully you will understand how to create twitter like follow button style with css, I also create full working follow system like twitter using php jquery







Download Demo

First this is our html codes

<!DOCTYPE html>
<html>
<head>
 <title>Twitter</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body> 
<div class="content">
 <div class="content-inner">
  
  <div class="div-box">
   <div class="div-body">
    <div class="body-inner">
     <img src="1.png"/>
    </div>

    <div class="div-icon">
     

    <div class="body-left">
     <div class="head-img">
      <img src="meezan.jpeg"/>
     </div>
    </div>
    <div class="body-right">
      <ul>
        <li><i><i class="fa fa-cog"></i></i></li>
        <li>
       <button class="btn-1" type="submit" value="follow">
        <i class="fa fa-user-plus"></i>
        Follow
       </button>
        </li> 
      </ul>
    </div>
</div>
    </div>
    <div class="body-footer">
     <div class="title">
     <h3>
      <a href="#">
       Meezan ud din
      </a>
     </h3>
     </div>
     <div class="link">
      @<a href="#">meezi</a>
     </div>
     <div class="dis">
      Internet hippie, <a href="#">#web </a><a href="#">#Designer</a>, #web #Developer ,#Entrepreneur ,#Coder , #Founder,I love the internet
     </div>
    </div>
   </div>
   
  </div>
  <button class="btn-2">
   Following
  </button>
  <button class="btn-3">
   Unfollow
  </button>
 </div>
</div>
</body>
</html>
And here is our css


*{
 margin: 0px;
 padding: 0px;
 height: auto;
 width: auto;
 font-family:Helvetica, Neue ;
 color: #292F33;
 line-height: 1.4em;
}
body{
 background:#F5F8FA; }
ul{
 list-style: none;
}
a{
 color: #1A1F2;
 text-decoration: none;
}
.content{
 width: 1000px;
 margin: 10px auto;

}
.content-inner{
 width: 100%;
 margin: 40px auto;
}

.div-box{
 width: 300px;
 height: 280px;
 border-radius: 4px;
 background: white;
}

.div-body{
 width: 100%;
 height: 140px;
}
.body-inner{
 height: 95px;
 background: #ccc;
 border-radius: 4px;

}
.body-inner img{
 width: 100%;
 height: 100%;
 border-top-right-radius: 3px;
 border-top-left-radius: 3px;
 border-bottom: 1px solid rgba(245, 248, 250, 0.79);
}
.body-left{
 width: auto;
 float: left;
 position: absolute;
 margin: -30px 0px 0px 10px;
}
.body-right{
 width: 40%;
 float: right;
 margin: 10px 10px;
}
.body-right ul li{
 display: inline-block;
}
.body-right ul li .btn-1{
 border: 1px solid #ededed;
 color: #292F33;
 background-color: #fff;
 font-weight: bold;
 font-family: sans-serif;
 background-image: linear-gradient(#fff,#f5f8fa);
 padding: 3px 13px;
 font-size: 13px;
 border-radius: 2px;
 cursor: pointer;
  }
.body-right ul li .btn-1:hover {
 background-image: linear-gradient(#fff,#e6e6e6);
}
button.btn-1:active{
background-image: linear-gradient(#fff,#f5f8fa);
 cursor: pointer;
}
.head-img{
 width: 70px;
 height: 60px;
 border-radius: 4px;
 background: white;
 padding: 3px;
}
.head-img:hover{
 cursor: pointer;
}
.head-img img{
 width: 100%;
}
.body-footer{
 width: 280px;
 margin: 0px auto;
 padding: 3px;

}

.title a,.link a{
 text-decoration: none;
}
.title a:hover, .link a:hover,.title a:active ,.link a:active{
 text-decoration:underline;
}

.fa-cog{
 color: #8899A6;
}
.fa-cog:hover, .fa-cog:active{
 color: #1DA1F2;
 cursor:pointer;
}
.fa-user-plus{color: #1DA1F2;}
.dis{
 color: #5A6063;

}
.link{
 color: #5A6063;
}
.dis a{
 color: rgb(29, 161, 242);
}
.dis a:hover{
 text-decoration: underline;
}

.btn-2{
 color: #fff;
 background-color: #1da1f2;
 background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.05));
 border: 1px solid #3FAFF4;
 box-shadow: inset 0 2px 0 rgba(206, 181, 181, 0.2);
 font-weight: bold;
 padding: 3px 13px;
 border-radius: 4px;
 cursor: pointer;
}
.btn-3{
 color: #fff;
 background-color: #f9331c;
 background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.05));
 border: 1px solid #C87979;
 box-shadow: inset 0 2px 0 rgba(206, 181, 181, 0.2);
 font-weight: bold;
 padding: 3px 13px;
 border-radius: 4px;
 cursor: pointer
}

Tags: