Skip to content

Instantly share code, notes, and snippets.

@jonhainstock
jonhainstock / bootstrap-button.html
Last active December 19, 2015 00:29
Bootstrap Buttons HTML
<a href="#" class="btn btn-your-class">Your Button Tetxt</a>
@jonhainstock
jonhainstock / bootstrap-navbar.html
Last active February 26, 2021 22:16
Standard Bootstrap Navbar
<div class="navbar navbar-your-class navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></button> <a class="brand" href="#">Your Logo</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
@jonhainstock
jonhainstock / harvest-navbar.css
Last active February 26, 2021 22:16
Harvest Inspired Bootstrap Navbar
.navbar-harvest .navbar-inner {
background: #f36c00;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f68a28), color-stop(100%, #f36c00));
background: -webkit-linear-gradient(top, #f68a28,#f36c00);
background: -moz-linear-gradient(top, #f68a28,#f36c00);
background: -o-linear-gradient(top, #f68a28,#f36c00);
background: -ms-linear-gradient(top, #f68a28,#f36c00);
background: linear-gradient(top, #f68a28,#f36c00);
}
.navbar-harvest .navbar-inner .nav {
@jonhainstock
jonhainstock / simple-navbar.css
Last active February 26, 2021 22:16
Simple Inspired Bootstrap Navbar
.navbar-simple .brand {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-simple .navbar-inner {
background: #fff;
filter: none !important;
box-shadow: 0 2px 15px rgba(0,0,0,0.25);
-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
@jonhainstock
jonhainstock / zoomshift-button.css
Last active December 19, 2015 00:29
ZoomShift Bootstrap Buttons
.btn-zoomshift {
background-color: hsl(0, 84%, 65%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f59393", endColorstr="#f05a5a");
background-image: -khtml-gradient(linear, left top, left bottom, from(#f59393), to(#f05a5a));
background-image: -moz-linear-gradient(top, #f59393, #f05a5a);
background-image: -ms-linear-gradient(top, #f59393, #f05a5a);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f59393), color-stop(100%, #f05a5a));
background-image: -webkit-linear-gradient(top, #f59393, #f05a5a);
background-image: -o-linear-gradient(top, #f59393, #f05a5a);
@jonhainstock
jonhainstock / stripe-button.css
Last active October 5, 2018 06:36
Stripe Inspired Bootstrap Button
.btn-stripe {
color: #fff;
background: #008cdd;
background-image: -webkit-linear-gradient(top, #7dc5ee, #008cdd 85%, #30a2e4);
background-image: -moz-linear-gradient(top, #7dc5ee, #008cdd 85%, #30a2e4);
background-image: -ms-linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
background-image: -o-linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
background-image: linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
background: linear-gradient(top, #7dc5ee, #008cdd 85%, #30a2e4);
text-shadow: 0 1px 1px rgba(0,0,0,0.53);
@jonhainstock
jonhainstock / basecamp-button.css
Last active January 20, 2016 15:02
Basecamp Inspired Bootstrap Button
.btn-basecamp {
background-image: none;
background: #fff;
border: 1px solid #ccc;
-webkit-box-shadow: 0px 1px 0px #ddd;
-moz-box-shadow: 0px 1px 0px #ddd;
box-shadow: 0px 1px 0px #ddd;
}
.btn-basecamp:hover {
background: #fff;
@jonhainstock
jonhainstock / geckoboard-button.css
Last active February 26, 2021 22:16
Geckoboard Inspired Bootstrap Button
.btn-geckoboard {
background: #7EB348;
background-image: none;
border:none;
color: #fff;
letter-spacing: 1px;
font-weight: 600;
text-decoration: none ! important;
text-shadow: none;
text-transform: uppercase;