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 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://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 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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS