Creating Twitter Like Follow Style Button With Pure CSS

Creating Twitter Like Follow Style Button With Pure CSS
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

Twitter Like Follow Button With Pure CSS,twitter follow botton with css3





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
}

Comments