google plus button labels style

This bootstrap snippet called "google plus button labels style" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: buttons,labels,style

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


				                
<div class="col-md-6 col-sm-6">
        <div class="panel panel-default">
           <div class="panel-heading"><a class="pull-right" href="#">View all</a> <h4>Google plus Buttons  Labels</h4></div>
   			<div class="panel-body">
              <div class="row">
                <div class="col-xs-4"><a href="#" class="btn btn-default center-block">Button</a></div>
                <div class="col-xs-4"><a href="#" class="btn btn-primary center-block">Primary</a></div>
                <div class="col-xs-4"><a href="#" class="btn btn-danger center-block">Danger</a></div>
              </div>
              <br>
              <div class="row">
                <div class="col-xs-4"><a href="#" class="btn btn-warning center-block">Warning</a></div>
                <div class="col-xs-4"><a href="#" class="btn btn-info center-block">Info</a></div>
                <div class="col-xs-4"><a href="#" class="btn btn-success center-block">Success</a></div>
              </div>
              <hr>
              <div class="btn-group btn-group-sm"><button class="btn btn-default">1</button><button class="btn btn-default">2</button><button class="btn btn-default">3</button></div>              
              <hr>
              <div class="row">
              <div class="col-md-4">
                <span class="label label-default">Label</span>
                <span class="label label-success">Success</span>
                
              </div>
              <div class="col-md-4">
              	<span class="label label-warning">Warning</span>  
                <span class="label label-info">Info</span>
              </div>
              <div class="col-md-4">
                <span class="label label-danger">Danger</span>
                <span class="label label-primary">Primary</span>
                </div>
              </div>
              
            </div>
         </div> 
    </div>			              

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


				                
.btn, .form-control, .panel, .list-group, .well {
    border-radius: 1px;
    box-shadow: 0 0 0;
}

.panel .panel-heading {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: #262626;
    font-size: 16px;
    font-weight: 700;
}

.panel .panel-heading a {
    font-size: 11px;
    font-weight: 400;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.0

Created: May 10th 2014, 17:41

Views: 3.5K

Rated 5/5 based on 1 reviews