"Bordered Button | Hover Effect"
Bootstrap 3.3.0 Snippet by vijaysasavadiya

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="div-container">
<div class="div-heading">
<h3 class="text-center heading">Bordered Button</h3>
</div>
<div class="div-content">
<a class="btn btn-bordered-primary"><span class="glyphicon glyphicon-fire"></span> Primary</a>
<a class="btn btn-bordered-success"><span class="glyphicon glyphicon-ok"></span> Success</a>
<a class="btn btn-bordered-info"><span class="glyphicon glyphicon-flag"></span> Info</a>
<a class="btn btn-bordered-warning"><span class="glyphicon glyphicon-leaf"></span> Warning</a>
<a class="btn btn-bordered-danger"><span class="glyphicon glyphicon-remove"></span> Danger</a>
<br>
<a class="btn btn-lg btn-bordered-primary"><span class="glyphicon glyphicon-fire"></span> Primary</a>
<a class="btn btn-lg btn-bordered-success"><span class="glyphicon glyphicon-ok"></span> Success</a>
<a class="btn btn-lg btn-bordered-info"><span class="glyphicon glyphicon-flag"></span> Info</a>
<a class="btn btn-lg btn-bordered-warning"><span class="glyphicon glyphicon-leaf"></span> Warning</a>
<a class="btn btn-lg btn-bordered-danger"><span class="glyphicon glyphicon-remove"></span> Danger</a>
<br>
<a class="btn btn-xl btn-bordered-primary"><span class="glyphicon glyphicon-fire"></span> Primary</a>
<a class="btn btn-xl btn-bordered-success"><span class="glyphicon glyphicon-ok"></span> Success</a>
<a class="btn btn-xl btn-bordered-info"><span class="glyphicon glyphicon-flag"></span> Info</a>
<a class="btn btn-xl btn-bordered-warning"><span class="glyphicon glyphicon-leaf"></span> Warning</a>
<a class="btn btn-xl btn-bordered-danger"><span class="glyphicon glyphicon-remove"></span> Danger</a>
<hr>
<a class="btn btn-square-toround btn-bordered-primary"><span class="glyphicon glyphicon-fire"></span> Primary</a>
<a class="btn btn-square-toround btn-bordered-success"><span class="glyphicon glyphicon-ok"></span> Success</a>
<a class="btn btn-square-toround btn-bordered-info"><span class="glyphicon glyphicon-flag"></span> Info</a>
<a class="btn btn-square-toround btn-bordered-warning"><span class="glyphicon glyphicon-leaf"></span> Warning</a>
<a class="btn btn-square-toround btn-bordered-danger"><span class="glyphicon glyphicon-remove"></span> Danger</a>
<br>
<a class="btn btn-square-toround btn-lg btn-bordered-primary"><span class="glyphicon glyphicon-fire"></span> Primary</a>
<a class="btn btn-square-toround btn-lg btn-bordered-success"><span class="glyphicon glyphicon-ok"></span> Success</a>
<a class="btn btn-square-toround btn-lg btn-bordered-info"><span class="glyphicon glyphicon-flag"></span> Info</a>
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
.div-container{border-top:3px solid #428BCA;border-right:3px solid #D9534F;border-bottom:3px solid #5CB85C;border-left:3px solid #F0AD4E;margin:30px;border-radius:20px 20px 0px 0px}
.div-heading{border-bottom:1px dashed #5BC0DE;padding-top:15px;padding-bottom:15px;margin:0px;background-color:#F5F5F5;border-radius:19px 19px 0px 0px}
.heading{color:#5FC9E5}
.div-content{padding:30px}
.btn-lg
{
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
}
.btn-xl
{
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
}
.btn{transition:all 0.8s;-o-transition:all 0.8s;-moz-transition:all 0.8s;-webkit-transition:all 0.8s;border-radius:0px;margin-top:10px}
.btn-rounded{border-radius:50px}
.btn-round-tosquare:hover{border-radius:0px}
.btn-square-toround:hover{border-radius:50px}
.btn-bordered-primary{color:#428BCA;background:#FFFFFF;border:2px solid #428BCA}
.btn-bordered-primary:hover{color:#FFFFFF;background:#428BCA;border:2px solid #FFFFFF}
.btn-bordered-success{color:#5CB85C;background:#FFFFFF;border:2px solid #5CB85C}
.btn-bordered-success:hover{color:#FFFFFF;background:#5CB85C;border:2px solid #FFFFFF}
.btn-bordered-info{color:#5BC0DE;background:#FFFFFF;border:2px solid #5BC0DE}
.btn-bordered-info:hover{color:#FFFFFF;background:#5BC0DE;border:2px solid #FFFFFF}
.btn-bordered-warning{color:#F0AD4E;background:#FFFFFF;border:2px solid #F0AD4E}
.btn-bordered-warning:hover{color:#FFFFFF;background:#F0AD4E;border:2px solid #FFFFFF}
.btn-bordered-danger{color:#D9534F;background:#FFFFFF;border:2px solid #D9534F}
.btn-bordered-danger:hover{color:#FFFFFF;background:#D9534F;border:2px solid #FFFFFF}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: