btn.css
Version:
a scalable, style-able button.
149 lines (127 loc) • 3.73 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
.ff-system-sans{font-family: -apple-system, BlinkMacSystemFont, sans-serif}
.fw-900{font-weight: 900}
.xw-600p{max-width: 600px}
.m-0a{margin: 0 auto}
.mb_4 > * {margin-bottom: 4rem}
style {display: block; font-family: monospace; white-space: pre}
</style>
</head>
<body class="ff-system-sans mb_4" style="padding: 5vw 10vw">
<header>
<h1 class="fw-900">btn.css</h1>
<p>A scalable, style-able button.</p>
</header>
<section>
<h3 class="fw-900">All the code</h3>
<p>This is everything you get with the btn.css class.</p>
<style>
/*! btn.css */
.btn {
font-size: 1em;
line-height: 2em;
display: inline-block;
padding: 0 1em;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
border-width: 1px;
border-style: solid;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<button type="button" class="btn">button</button>
</section>
<section>
<h3 class="fw-900">Let's make a button</h3>
<p>You're an adult. Make buttons all on your own.</p>
<style>
.outline-blue-btn {
border-color: currentColor;
background-color: transparent;
color: blue;
}
</style>
<button type="button" class="outline-blue-btn btn">button</button>
</section>
<section>
<h3 class="fw-900">Moar sizes, plz</h3>
<p>
This button uses em for sizing.
Buttons are sized relative to the <code>font-size</code>.
</p>
<p>
Want bigger or smaller buttons?
Change the <code>font-size</code>.
</p>
<style>
.btn--lg { font-size: 1.125em }
.btn--sm { font-size: .8em }
</style>
<button type="button" class="outline-blue-btn btn btn--lg">button</button>
<br />
<br />
<button type="button" class="outline-blue-btn btn btn--sm">button</button>
</section>
<section>
<h3 class="fw-900">Moar like bootstrap, plz</h3>
<p>Bring your own theme. Do what you want.</p>
<style>
.bootstrap-theme .btn { border-radius: 4px }
</style>
<div class="bootstrap-theme">
<button type="button" class="outline-blue-btn btn">button</button>
</div>
</section>
<section>
<h3 class="fw-900">Sweet, sweet states</h3>
<p>Set all the colors and your good to go!</p>
<style>
.my-app .btn:hover {
background-color: blue;
border-color: blue;
color: white;
}
.my-app .btn:active {
background-color: darkblue;
border-color: darkblue;
color: whitesmoke;
}
</style>
<div class="my-app bootstrap-theme">
<button type="button" class="outline-blue-btn btn">button</button>
</div>
</section>
<section>
<h3 class="fw-900">Installation</h3>
<strong>Script tag:</strong>
<pre><code>
<link rel="stylesheet" href="https://unpkg.com/btn.css@0.2.0" />
</pre></code>
<strong>Node:</strong>
<pre><code>
npm install btn.css@0.2.0
</pre></code>
</section>
<section>
<h3 class="fw-900">The code</h3>
<a href="https://github.com/chantastic/btn.css" target="_blank">Source on Github</a>
♥ <a href="http://twitter.com/chantastic" target="_blank">chantastic</a>
</section>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-46843279-3', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>