<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-9"> <div class="row"> <div class="col-md-12 post"> <div class="row"> <div class="col-md-12"> <h4> <strong><a href="http://www.jquery2dotnet.com/2013/12/cool-share-button-effects-styles.html" class="post-title">Cool Share Button Effects Styles</a></strong></h4> </div> </div> <div class="row"> <div class="col-md-12 post-header-line"> <span class="glyphicon glyphicon-user"></span>by <a href="#">Bhaumik</a> | <span class="glyphicon glyphicon-calendar"> </span>Sept 16th, 2012 | <span class="glyphicon glyphicon-comment"></span><a href="#"> 3 Comments</a> | <i class="icon-share"></i><a href="#">39 Shares</a> | <span class="glyphicon glyphicon-tags"> </span>Tags : <a href="#"><span class="label label-info">Snipp</span></a> <a href="#"> <span class="label label-info">Bootstrap</span></a> <a href="#"><span class="label label-info"> UI</span></a> <a href="#"><span class="label label-info">growth</span></a> </div> </div> <div class="row post-content"> <div class="col-md-3"> <a href="#"> <img src="http://4.bp.blogspot.com/-_lqoNpVXeU4/UkxQ7N-QW8I/AAAAAAAACTw/pni-TZyp17o/s1600/cool+share+button+effects+styles.png" alt="" class="img-responsive"> </a> </div> <div class="col-md-9"> <p> Lorem ipsum dolor sit amet, id nec conceptam conclusionemque. Et eam tation option. Utinam salutatus ex eum. Ne mea dicit tibique facilisi, ea mei omittam explicari conclusionemque, ad nobis propriae quaerendum sea. </p> <p> <a class="btn btn-read-more" href="http://www.jquery2dotnet.com/2013/12/cool-share-button-effects-styles.html">Read more</a></p> </div> </div> </div> </div> </div>

body { margin-top: 50px; } a:hover { text-decoration:none; } .btn { transition: all .2s linear; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -o-transition: all .2s linear; } .btn-read-more { padding: 5px; text-align: center; border-radius: 0px; display: inline-block; border: 2px solid #662D91; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 12px; color:#662D91; } .btn-read-more:hover { color: #FFF; background: #662D91; } .post { border-bottom:1px solid #DDD } .post-title { color:#662D91; } .post .glyphicon { margin-right:5px; } .post-header-line { border-top:1px solid #DDD;border-bottom:1px solid #DDD;padding:5px 0px 5px 15px;font-size: 12px; } .post-content { padding-bottom: 15px;padding-top: 15px;}