content logo

Bootstrap Buttons:

Bootstrap Cool Buttons With Labels and Icons

It is actually really important what your button says on it and how it looks. We all know a good design avoids confusing the users and is easy to understand. Using the wrong labels can cause confusion among users and may lead to making some big mistakes and loss of time. Due to this reason, you have to pay attention to what you put as a label on your buttons. A good button label must invite the users to take the action. You want to be as clear as possible so avoid using puzzles for your users to solve. Simply stating what the button actually does in a simple verb is quite effective and, in most cases, more than enough. A good way to look at it is by imagining the button is asking the user to do the action; something like “would you care to confirm order?”. Also try to avoid using too generic labels like yes or no unless it is necessary.

Below is a code for some awesome Bootstrap buttons. It features various cool buttons for different purposes in your website. They are all labeled properly and are colourful enough to avoid being too boring. Unfortunately, these Bootstrap beautiful buttons don’t feature any special effects or animations but still if you want some professional Bootstrap button icons, the code could be useful.

#Bootstrap Button

#Cool Buttons

#Bootstrap Beautiful Buttons

#Bootstrap Button Icon


<!-- This script got from www.frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-labeled btn-success">
                <span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Success
            </button>
            <button type="button" class="btn btn-labeled btn-danger">
                <span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Cancel
            </button>
            <br />
            <button type="button" class="btn btn-labeled btn-warning">
                <span class="btn-label"><i class="glyphicon glyphicon-bookmark"></i></span>Bookmark
            </button>
            <button type="button" class="btn btn-labeled btn-primary">
                <span class="btn-label"><i class="glyphicon glyphicon-camera"></i></span>Camera
            </button>
            <br />
            <button type="button" class="btn btn-labeled btn-default">
                <span class="btn-label"><i class="glyphicon glyphicon-chevron-left"></i></span>Left
            </button>
            <button type="button" class="btn btn-labeled btn-default">
                <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
                Right
            </button>
            <br />
            <button type="button" class="btn btn-labeled btn-success">
                <span class="btn-label"><i class="glyphicon glyphicon-thumbs-up"></i></span>Thumbs
                Up
            </button>
            <button type="button" class="btn btn-labeled btn-danger">
                <span class="btn-label"><i class="glyphicon glyphicon-thumbs-down"></i></span>Thumbs
                Down
            </button>
            <br />
            <button type="button" class="btn btn-labeled btn-info">
                <span class="btn-label"><i class="glyphicon glyphicon-refresh"></i></span>Refresh
            </button>
            <button type="button" class="btn btn-labeled btn-danger">
                <span class="btn-label"><i class="glyphicon glyphicon-trash"></i></span>Trash
            </button>
            <br />
            <a class="btn btn-success btn-labeled" href="#" role="button">
                <span class="btn-label"><i class="glyphicon glyphicon-info-sign"></i></span>Info Web
            </a>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Free Frontend</a>
                                                                            
.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
.btn { margin-bottom:10px; }
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
<style>
.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
.btn { margin-bottom:10px; }
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-labeled btn-success">
                <span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Success
            </button>
            <button type="button" class="btn btn-labeled btn-danger">
                <span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Cancel
            </button>
            <br />
            <button type="button" class="btn btn-labeled btn-warning">
                <span class="btn-label"><i class="glyphicon glyphicon-bookmark"></i></span>Bookmark
            </button>
            <button type="button" class="btn btn-labeled btn-primary">
                <span class="btn-label"><i class="glyphicon glyphicon-camera"></i></span>Camera
            </button>
            <br />
            <button type="button" class="btn btn-labeled btn-default">
                <span class="btn-label"><i class="glyphicon glyphicon-chevron-left"></i></span>Left
            </button>
            <button type="button" class="btn btn-labeled btn-default">
                <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
                Right
            </button>
            <br />
            <button type="button" class="btn btn-labeled btn-success">
                <span class="btn-label"><i class="glyphicon glyphicon-thumbs-up"></i></span>Thumbs
                Up
            </button>
            <button type="button" class="btn btn-labeled btn-danger">
                <span class="btn-label"><i class="glyphicon glyphicon-thumbs-down"></i></span>Thumbs
                Down
            </button>
            <br />
            <button type="button" class="btn btn-labeled btn-info">
                <span class="btn-label"><i class="glyphicon glyphicon-refresh"></i></span>Refresh
            </button>
            <button type="button" class="btn btn-labeled btn-danger">
                <span class="btn-label"><i class="glyphicon glyphicon-trash"></i></span>Trash
            </button>
            <br />
            <a class="btn btn-success btn-labeled" href="#" role="button">
                <span class="btn-label"><i class="glyphicon glyphicon-info-sign"></i></span>Info Web
            </a>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview