Instantly share code, notes, and snippets.
- Burlington, WI
- https://www.jonhainstock.com
- @jonhainstock
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a href="#" class="btn btn-your-class">Your Button Tetxt</a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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
/ harvest-navbar.css
Last active
February 26, 2021 22:16
Harvest Inspired Bootstrap Navbar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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
/ simple-navbar.css
Last active
February 26, 2021 22:16
Simple Inspired Bootstrap Navbar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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
/ basecamp-button.css
Last active
January 20, 2016 15:02
Basecamp Inspired Bootstrap Button
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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
/ geckoboard-button.css
Last active
February 26, 2021 22:16
Geckoboard Inspired Bootstrap Button
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; |