<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="container-fluid">
<div class="row">
<div class="col-xs-3">
<button type="button" class="btn btn-arrow btn-arrow-up btn-primary">Up Button</button>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-arrow btn-arrow-bottom btn-success btn-outline">Down Button</button>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-arrow btn-arrow-left btn-danger btn-outline">Left Button</button>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-arrow btn-arrow-right btn-warning">Right Button</button>
</div>
</div>
</div>
/* override */
body {
padding: 50px 0;
}
/* arrow buttons */
.btn-arrow {
position: relative;
}
.btn-arrow:after, .btn-arrow:before {
position: absolute;
line-height: 0;
content: '';
}
.btn-arrow:before {
z-index: 10;
}
.btn-arrow:after {
z-index: 9;
}
.btn-arrow-bottom:before,
.btn-arrow-up:before {
border-right: 6px solid transparent;
border-left: 6px solid transparent;
left: 50%;
margin-left: -6px;
}
.btn-arrow-bottom:after,
.btn-arrow-up:after {
border-right: 8px solid transparent;
border-left: 8px solid transparent;
left: 50%;
margin-left: -8px;
}
.btn-arrow-left:before,
.btn-arrow-right:before {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
top: 50%;
margin-top: -6px;
}
.btn-arrow-left:after,
.btn-arrow-right:after {
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
top: 50%;
margin-top: -8px;
}
.btn-default.btn-arrow-up:before {
border-bottom: 6px solid #fff;
top: -6px;
}
.btn-default.btn-arrow-up:after {
border-bottom: 8px solid #ccc;
top: -8px;
}
.btn-default.btn-arrow-up.focus:before, .btn-default.btn-arrow-up:focus:before {
border-bottom-color: #e6e6e6;
}
.btn-default.btn-arrow-up.focus:after, .btn-default.btn-arrow-up:focus:after {
border-bottom-color: #8c8c8c;
}
.btn-default.btn-arrow-up:hover:before {
border-bottom-color: #e6e6e6;
}
.btn-default.btn-arrow-up:hover:after {
border-bottom-color: #adadad;
}
.btn-default.btn-arrow-bottom:before {
border-top: 6px solid #fff;
bottom: -6px;
}
.btn-default.btn-arrow-bottom:after {
border-top: 8px solid #ccc;
bottom: -8px;
}
.btn-default.btn-arrow-bottom.focus:before, .btn-default.btn-arrow-bottom:focus:before {
border-top-color: #e6e6e6;
}
.btn-default.btn-arrow-bottom.focus:after, .btn-default.btn-arrow-bottom:focus:after {
border-top-color: #8c8c8c;
}
.btn-default.btn-arrow-bottom:hover:before {
border-top-color: #e6e6e6;
}
.btn-default.btn-arrow-bottom:hover:after {
border-top-color: #adadad;
}
.btn-default.btn-arrow-left:before {
border-right: 6px solid #fff;
left: -6px;
}
.btn-default.btn-arrow-left:after {
border-right: 8px solid #ccc;
left: -8px;
}
.btn-default.btn-arrow-left.focus:before, .btn-default.btn-arrow-left:focus:before {
border-right-color: #e6e6e6;
}
.btn-default.btn-arrow-left.focus:after, .btn-default.btn-arrow-left:focus:after {
border-right-color: #8c8c8c;
}
.btn-default.btn-arrow-left:hover:before {
border-right-color: #e6e6e6;
}
.btn-default.btn-arrow-left:hover:after {
border-right-color: #adadad;
}
.btn-default.btn-arrow-right:before {
border-left: 6px solid #fff;
right: -6px;
}
.btn-default.btn-arrow-right:after {
border-left: 8px solid #ccc;
right: -8px;
}
.btn-default.btn-arrow-right.focus:before, .btn-default.btn-arrow-right:focus:before {
border-left-color: #e6e6e6;
}
.btn-default.btn-arrow-right.focus:after, .btn-default.btn-arrow-right:focus:after {
border-left-color: #8c8c8c;
}
.btn-default.btn-arrow-right:hover:before {
border-left-color: #e6e6e6;
}
.btn-default.btn-arrow-right:hover:after {
border-left-color: #adadad;
}
.btn-primary.btn-arrow-up:before {
border-bottom: 6px solid #428bca;
top: -6px;
}
.btn-primary.btn-arrow-up:after {
border-bottom: 8px solid #357ebd;
top: -8px;
}
.btn-primary.btn-arrow-up.focus:before, .btn-primary.btn-arrow-up:focus:before {
border-bottom-color: #3071a9;
}
.btn-primary.btn-arrow-up.focus:after, .btn-primary.btn-arrow-up:focus:after {
border-bottom-color: #193c5a;
}
.btn-primary.btn-arrow-up:hover:before {
border-bottom-color: #3071a9;
}
.btn-primary.btn-arrow-up:hover:after {
border-bottom-color: #285e8e;
}
.btn-primary.btn-arrow-bottom:before {
border-top: 6px solid #428bca;
bottom: -6px;
}
.btn-primary.btn-arrow-bottom:after {
border-top: 8px solid #357ebd;
bottom: -8px;
}
.btn-primary.btn-arrow-bottom.focus:before, .btn-primary.btn-arrow-bottom:focus:before {
border-top-color: #3071a9;
}
.btn-primary.btn-arrow-bottom.focus:after, .btn-primary.btn-arrow-bottom:focus:after {
border-top-color: #193c5a;
}
.btn-primary.btn-arrow-bottom:hover:before {
border-top-color: #3071a9;
}
.btn-primary.btn-arrow-bottom:hover:after {
border-top-color: #285e8e;
}
.btn-primary.btn-arrow-left:before {
border-right: 6px solid #428bca;
left: -6px;
}
.btn-primary.btn-arrow-left:after {
border-right: 8px solid #357ebd;
left: -8px;
}
.btn-primary.btn-arrow-left.focus:before, .btn-primary.btn-arrow-left:focus:before {
border-right-color: #3071a9;
}
.btn-primary.btn-arrow-left.focus:after, .btn-primary.btn-arrow-left:focus:after {
border-right-color: #193c5a;
}
.btn-primary.btn-arrow-left:hover:before {
border-right-color: #3071a9;
}
.btn-primary.btn-arrow-left:hover:after {
border-right-color: #285e8e;
}
.btn-primary.btn-arrow-right:before {
border-left: 6px solid #428bca;
right: -6px;
}
.btn-primary.btn-arrow-right:after {
border-left: 8px solid #357ebd;
right: -8px;
}
.btn-primary.btn-arrow-right.focus:before, .btn-primary.btn-arrow-right:focus:before {
border-left-color: #3071a9;
}
.btn-primary.btn-arrow-right.focus:after, .btn-primary.btn-arrow-right:focus:after {
border-left-color: #193c5a;
}
.btn-primary.btn-arrow-right:hover:before {
border-left-color: #3071a9;
}
.btn-primary.btn-arrow-right:hover:after {
border-left-color: #285e8e;
}
.btn-success.btn-arrow-up:before {
border-bottom: 6px solid #5cb85c;
top: -6px;
}
.btn-success.btn-arrow-up:after {
border-bottom: 8px solid #4cae4c;
top: -8px;
}
.btn-success.btn-arrow-up.focus:before, .btn-success.btn-arrow-up:focus:before {
border-bottom-color: #449d44;
}
.btn-success.btn-arrow-up.focus:after, .btn-success.btn-arrow-up:focus:after {
border-bottom-color: #255625;
}
.btn-success.btn-arrow-up:hover:before {
border-bottom-color: #449d44;
}
.btn-success.btn-arrow-up:hover:after {
border-bottom-color: #398439;
}
.btn-success.btn-arrow-bottom:before {
border-top: 6px solid #5cb85c;
bottom: -6px;
}
.btn-success.btn-arrow-bottom:after {
border-top: 8px solid #4cae4c;
bottom: -8px;
}
.btn-success.btn-arrow-bottom.focus:before, .btn-success.btn-arrow-bottom:focus:before {
border-top-color: #449d44;
}
.btn-success.btn-arrow-bottom.focus:after, .btn-success.btn-arrow-bottom:focus:after {
border-top-color: #255625;
}
.btn-success.btn-arrow-bottom:hover:before {
border-top-color: #449d44;
}
.btn-success.btn-arrow-bottom:hover:after {
border-top-color: #398439;
}
.btn-success.btn-arrow-left:before {
border-right: 6px solid #5cb85c;
left: -6px;
}
.btn-success.btn-arrow-left:after {
border-right: 8px solid #4cae4c;
left: -8px;
}
.btn-success.btn-arrow-left.focus:before, .btn-success.btn-arrow-left:focus:before {
border-right-color: #449d44;
}
.btn-success.btn-arrow-left.focus:after, .btn-success.btn-arrow-left:focus:after {
border-right-color: #255625;
}
.btn-success.btn-arrow-left:hover:before {
border-right-color: #449d44;
}
.btn-success.btn-arrow-left:hover:after {
border-right-color: #398439;
}
.btn-success.btn-arrow-right:before {
border-left: 6px solid #5cb85c;
right: -6px;
}
.btn-success.btn-arrow-right:after {
border-left: 8px solid #4cae4c;
right: -8px;
}
.btn-success.btn-arrow-right.focus:before, .btn-success.btn-arrow-right:focus:before {
border-left-color: #449d44;
}
.btn-success.btn-arrow-right.focus:after, .btn-success.btn-arrow-right:focus:after {
border-left-color: #255625;
}
.btn-success.btn-arrow-right:hover:before {
border-left-color: #449d44;
}
.btn-success.btn-arrow-right:hover:after {
border-left-color: #398439;
}
.btn-info.btn-arrow-up:before {
border-bottom: 6px solid #5BCBEC;
top: -6px;
}
.btn-info.btn-arrow-up:after {
border-bottom: 8px solid #44c4e9;
top: -8px;
}
.btn-info.btn-arrow-up.focus:before, .btn-info.btn-arrow-up:focus:before {
border-bottom-color: #2dbde7;
}
.btn-info.btn-arrow-up.focus:after, .btn-info.btn-arrow-up:focus:after {
border-bottom-color: #127d9c;
}
.btn-info.btn-arrow-up:hover:before {
border-bottom-color: #2dbde7;
}
.btn-info.btn-arrow-up:hover:after {
border-bottom-color: #19acd7;
}
.btn-info.btn-arrow-bottom:before {
border-top: 6px solid #5BCBEC;
bottom: -6px;
}
.btn-info.btn-arrow-bottom:after {
border-top: 8px solid #44c4e9;
bottom: -8px;
}
.btn-info.btn-arrow-bottom.focus:before, .btn-info.btn-arrow-bottom:focus:before {
border-top-color: #2dbde7;
}
.btn-info.btn-arrow-bottom.focus:after, .btn-info.btn-arrow-bottom:focus:after {
border-top-color: #127d9c;
}
.btn-info.btn-arrow-bottom:hover:before {
border-top-color: #2dbde7;
}
.btn-info.btn-arrow-bottom:hover:after {
border-top-color: #19acd7;
}
.btn-info.btn-arrow-left:before {
border-right: 6px solid #5BCBEC;
left: -6px;
}
.btn-info.btn-arrow-left:after {
border-right: 8px solid #44c4e9;
left: -8px;
}
.btn-info.btn-arrow-left.focus:before, .btn-info.btn-arrow-left:focus:before {
border-right-color: #2dbde7;
}
.btn-info.btn-arrow-left.focus:after, .btn-info.btn-arrow-left:focus:after {
border-right-color: #127d9c;
}
.btn-info.btn-arrow-left:hover:before {
border-right-color: #2dbde7;
}
.btn-info.btn-arrow-left:hover:after {
border-right-color: #19acd7;
}
.btn-info.btn-arrow-right:before {
border-left: 6px solid #5BCBEC;
right: -6px;
}
.btn-info.btn-arrow-right:after {
border-left: 8px solid #44c4e9;
right: -8px;
}
.btn-info.btn-arrow-right.focus:before, .btn-info.btn-arrow-right:focus:before {
border-left-color: #2dbde7;
}
.btn-info.btn-arrow-right.focus:after, .btn-info.btn-arrow-right:focus:after {
border-left-color: #127d9c;
}
.btn-info.btn-arrow-right:hover:before {
border-left-color: #2dbde7;
}
.btn-info.btn-arrow-right:hover:after {
border-left-color: #19acd7;
}
.btn-warning.btn-arrow-up:before {
border-bottom: 6px solid #f0ad4e;
top: -6px;
}
.btn-warning.btn-arrow-up:after {
border-bottom: 8px solid #eea236;
top: -8px;
}
.btn-warning.btn-arrow-up.focus:before, .btn-warning.btn-arrow-up:focus:before {
border-bottom-color: #ec971f;
}
.btn-warning.btn-arrow-up.focus:after, .btn-warning.btn-arrow-up:focus:after {
border-bottom-color: #985f0d;
}
.btn-warning.btn-arrow-up:hover:before {
border-bottom-color: #ec971f;
}
.btn-warning.btn-arrow-up:hover:after {
border-bottom-color: #d58512;
}
.btn-warning.btn-arrow-bottom:before {
border-top: 6px solid #f0ad4e;
bottom: -6px;
}
.btn-warning.btn-arrow-bottom:after {
border-top: 8px solid #eea236;
bottom: -8px;
}
.btn-warning.btn-arrow-bottom.focus:before, .btn-warning.btn-arrow-bottom:focus:before {
border-top-color: #ec971f;
}
.btn-warning.btn-arrow-bottom.focus:after, .btn-warning.btn-arrow-bottom:focus:after {
border-top-color: #985f0d;
}
.btn-warning.btn-arrow-bottom:hover:before {
border-top-color: #ec971f;
}
.btn-warning.btn-arrow-bottom:hover:after {
border-top-color: #d58512;
}
.btn-warning.btn-arrow-left:before {
border-right: 6px solid #f0ad4e;
left: -6px;
}
.btn-warning.btn-arrow-left:after {
border-right: 8px solid #eea236;
left: -8px;
}
.btn-warning.btn-arrow-left.focus:before, .btn-warning.btn-arrow-left:focus:before {
border-right-color: #ec971f;
}
.btn-warning.btn-arrow-left.focus:after, .btn-warning.btn-arrow-left:focus:after {
border-right-color: #985f0d;
}
.btn-warning.btn-arrow-left:hover:before {
border-right-color: #ec971f;
}
.btn-warning.btn-arrow-left:hover:after {
border-right-color: #d58512;
}
.btn-warning.btn-arrow-right:before {
border-left: 6px solid #f0ad4e;
right: -6px;
}
.btn-warning.btn-arrow-right:after {
border-left: 8px solid #eea236;
right: -8px;
}
.btn-warning.btn-arrow-right.focus:before, .btn-warning.btn-arrow-right:focus:before {
border-left-color: #ec971f;
}
.btn-warning.btn-arrow-right.focus:after, .btn-warning.btn-arrow-right:focus:after {
border-left-color: #985f0d;
}
.btn-warning.btn-arrow-right:hover:before {
border-left-color: #ec971f;
}
.btn-warning.btn-arrow-right:hover:after {
border-left-color: #d58512;
}
.btn-danger.btn-arrow-up:before {
border-bottom: 6px solid #d9534f;
top: -6px;
}
.btn-danger.btn-arrow-up:after {
border-bottom: 8px solid #d43f3a;
top: -8px;
}
.btn-danger.btn-arrow-up.focus:before, .btn-danger.btn-arrow-up:focus:before {
border-bottom-color: #c9302c;
}
.btn-danger.btn-arrow-up.focus:after, .btn-danger.btn-arrow-up:focus:after {
border-bottom-color: #761c19;
}
.btn-danger.btn-arrow-up:hover:before {
border-bottom-color: #c9302c;
}
.btn-danger.btn-arrow-up:hover:after {
border-bottom-color: #ac2925;
}
.btn-danger.btn-arrow-bottom:before {
border-top: 6px solid #d9534f;
bottom: -6px;
}
.btn-danger.btn-arrow-bottom:after {
border-top: 8px solid #d43f3a;
bottom: -8px;
}
.btn-danger.btn-arrow-bottom.focus:before, .btn-danger.btn-arrow-bottom:focus:before {
border-top-color: #c9302c;
}
.btn-danger.btn-arrow-bottom.focus:after, .btn-danger.btn-arrow-bottom:focus:after {
border-top-color: #761c19;
}
.btn-danger.btn-arrow-bottom:hover:before {
border-top-color: #c9302c;
}
.btn-danger.btn-arrow-bottom:hover:after {
border-top-color: #ac2925;
}
.btn-danger.btn-arrow-left:before {
border-right: 6px solid #d9534f;
left: -6px;
}
.btn-danger.btn-arrow-left:after {
border-right: 8px solid #d43f3a;
left: -8px;
}
.btn-danger.btn-arrow-left.focus:before, .btn-danger.btn-arrow-left:focus:before {
border-right-color: #c9302c;
}
.btn-danger.btn-arrow-left.focus:after, .btn-danger.btn-arrow-left:focus:after {
border-right-color: #761c19;
}
.btn-danger.btn-arrow-left:hover:before {
border-right-color: #c9302c;
}
.btn-danger.btn-arrow-left:hover:after {
border-right-color: #ac2925;
}
.btn-danger.btn-arrow-right:before {
border-left: 6px solid #d9534f;
right: -6px;
}
.btn-danger.btn-arrow-right:after {
border-left: 8px solid #d43f3a;
right: -8px;
}
.btn-danger.btn-arrow-right.focus:before, .btn-danger.btn-arrow-right:focus:before {
border-left-color: #c9302c;
}
.btn-danger.btn-arrow-right.focus:after, .btn-danger.btn-arrow-right:focus:after {
border-left-color: #761c19;
}
.btn-danger.btn-arrow-right:hover:before {
border-left-color: #c9302c;
}
.btn-danger.btn-arrow-right:hover:after {
border-left-color: #ac2925;
}
