Bootstrap Snippet btn-shadow using HTML CSS Bootstrap

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
<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">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-2">
                <a href="#" class="btn btn-block btn-default btn-default-shadow">Default</a>
                <a href="#" class="btn btn-block btn-default btn-default-shadow disabled">Default</a>
            </div>
            <div class="col-md-2">
                <a href="#" class="btn btn-block btn-info btn-info-shadow">Info</a>
                <a href="#" class="btn btn-block btn-info btn-info-shadow disabled">Info</a>
            </div>
            <div class="col-md-2">
                <a href="#" class="btn btn-block btn-warning btn-warning-shadow">Warning</a>
                <a href="#" class="btn btn-block btn-warning btn-warning-shadow disabled">Warning</a>
            </div>
            <div class="col-md-2">
                <a href="#" class="btn btn-block btn-success btn-success-shadow">Success</a>
                <a href="#" class="btn btn-block btn-success btn-success-shadow disabled">Success</a>
            </div>
            <div class="col-md-2">
                <a href="#" class="btn btn-block btn-danger btn-danger-shadow">Danger</a>
                <a href="#" class="btn btn-block btn-danger btn-danger-shadow disabled">Danger</a>
            </div>
        </div>
    </div>
</div>
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
.btn-info-shadow, .btn-success-shadow, .btn-danger-shadow, .btn-warning-shadow, .btn-primary-shadow, .btn-default-shadow,
.btn-shadow {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 0, rgba(0, 0, 0, 0.2) 2px 2px 0, rgba(0, 0, 0, 0.2) 3px 3px 0;
  font-weight: bold;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.btn-info-shadow {
  -moz-box-shadow: #17324e 2px 2px 3px;
  -webkit-box-shadow: #17324e 2px 2px 3px;
  box-shadow: #17324e 2px 2px 3px;
}
.btn-success-shadow {
  -moz-box-shadow: #1d4e02 2px 2px 3px;
  -webkit-box-shadow: #1d4e02 2px 2px 3px;
  box-shadow: #1d4e02 2px 2px 3px;
}
.btn-danger-shadow {
  -moz-box-shadow: #4e0b0a 2px 2px 3px;
  -webkit-box-shadow: #4e0b0a 2px 2px 3px;
  box-shadow: #4e0b0a 2px 2px 3px;
}
.btn-warning-shadow {
  -moz-box-shadow: #896e17 2px 2px 3px;
  -webkit-box-shadow: #896e17 2px 2px 3px;
  box-shadow: #896e17 2px 2px 3px;
}
.btn-primary-shadow {
  -moz-box-shadow: #2f5989 2px 2px 3px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"btn-shadow"
Bootstrap 3.3.0 Snippet by efepimenta

Related: See More

Questions / Comments:

"btn-shadow" Bootstrap 3.3.0 Snippet by efepimenta

Related: See More

Questions / Comments:

"btn-shadow"
Bootstrap 3.3.0 Snippet by efepimenta