<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>
.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;
}
.btn-cart:active{
color:white;
background:#ffbe44;
}
.btn-cart:focus{
color:white;
background:#ffbe44;
}
.btn-information{
color: gray;
border: 0px solid;
background:white;
border:1px solid #e8e8e8;
}
.btn-information:hover{
color:#FF8C00;
}
.btn-information:focus{
color:#FF8C00;
background:#ececec;
}
.btn-information:active{
color:#FF8C00;
background:#ececec;
}
document.addEventListener("touchstart", function(){}, true)
