"Bare Buttons"
Bootstrap 3.0.0 Snippet by oscarmanderj

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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">
<h4>Buttons</h2>
<button type="button" class="btn btn-cart">
<span class="btn-label"></span> Add to cart</button>
<button type="button" class="btn btn-information">
</span> Information</button>
</div>
<hr>
</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{
white-space: nowrap;
display: inline-block;
padding: 10px 18px;
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
border-radius: 3px;
font-size: 18px;
text-transform: uppercase;
letter-spacing: .1em;
transition: all .3s ease;
border:0px;
color:white;
}
.btn:hover{
box-shadow: 2px 4px 6px rgba(0,0,0,0.10), 0 6px 6px rgba(0,0,0,0.10);
transform: translateY(-1px);
color:white;
}
.btn:focus{
box-shadow: inset 0 1px 2px rgba(50,50,93,.11), 0 1px 2px rgba(0,0,0,.08);
background:white;
}
.btn:active{
box-shadow: inset 0 1px 2px rgba(50,50,93,.11), 0 1px 2px rgba(0,0,0,.08);
transform: translateY(1px);
}
.btn:hover:focus {
transform: translateY(0px);
}
.btn-cart{
background:#FF8C00;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
document.addEventListener("touchstart", function(){}, true)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit
Ribbon Buttons
Сonvenient buttons

Questions / Comments: