"Bootstrap Custom Buttons and Panels"
Bootstrap 3.2.0 Snippet by blayderunner123

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Custom Buttons and Panels</title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<p class="help-block">No JavaSctipt or Jquery required to implement<br>Compatable up to Bootstrap 3.3.1 and Jquery 2.0.3</p>
<h3 class="text-center"><b style="font-weight:800;">Custom Buttons</b></h3>
<div class="row-fluid">
<div class="btn-group col-sm-12 text-center" role="group" aria-label="customBtn">
<ul class="list-inline">
<li><a type="button" class="btn btn-primary" data-href="#">btn-primary</a></li>
<li><a type="button" class="btn btn-inverse" data-href="#">btn-inverse</a></li>
<li><a type="button" class="btn btn-danger" data-href="#">btn-danger</a></li>
<li><a type="button" class="btn btn-success" data-href="#">btn-success</a></li>
<li><a type="button" class="btn btn-default" data-href="#">btn-default</a></li>
</ul>
</div>
</div>
</div>
<br>
<div class="container">
<div class="col-lg-4 col-lg-offset-4 col-sm-12">
<div class="panel panel-lg panel-custom">
<div class="panel-heading">
<h4 class="post-heading1">Login</h4>
</div>
<div class="panel-body">
<p class="post-content">
<form role="form">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
========================================
=======CUSTOM BOOTSTRAP Buttons=========
========================================
*/
/*BTN-SUCCESS*/
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
color: #fff;
background-color: #449d44;
border-color: #398439;
box-shadow: inset 0 0 0 2px #398439;
}
/*BTN-DANGER*/
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 0 0 2px #ac2925;
}
/*BTN-PRIMARY*/
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
/*
No JavaSctipt or Jquery required to implement
Compatable up to Bootstrap 3.3.1 and Jquery 2.0.3
*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: