lol

Creating Twitter Like Follow Style Button With Pure CSS

27 July 08:26am
(0)    250K
screen

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
CODE
http://www.onet4u.com

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>

http://www.onet4u.com


And here is our css

CODE
http://www.onet4u.com

*{
 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
}

http://www.onet4u.com



screen
Sharing is Caring
digg  
digg    googel   facebook    twitter    delicious
Comments
Categories Uncategorized 10 Android Apps 151 Windows Tools 20 PHP & HTML Script 17 Tutorials 25 Novel 1 Music Maker 4 Mac OS X 6 Data Recovery 7 Games 62 3D/Animation 11 Web-Design 7 Antivirus/Security 5 Android ROMs 5 The Viral Story 6 Whmcs Free/Nulled 1