-
Notifications
You must be signed in to change notification settings - Fork 32
/
Copy pathindex.html
171 lines (165 loc) · 8.57 KB
/
index.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
btns.css - beautiful button styles
</title>
<meta name="author" content="Adam Morse">
<meta name="description" content="css utilities for constructing beautiful and responsive buttons">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/btns.min.css">
<style type="text/css" media="screen">
a{text-decoration:none;color:#222;}body,html{height:100%;padding:0;margin:0;}div,header,article,section,footer,main,a{box-sizing:border-box;}html{font-family:avenir,helvetica,arial,sans-serif;}h2{font-weight:100;font-size:20px;}.man{margin:0;}.mega{font-size:3em;}.dib{display:inline-block;}.tc{text-align:center;}.small{font-size:14px;}.mrs{margin-right:1em;}.bb{border-bottom:1px dotted #bbb;}.bt{border-top:1px dotted #bbb;}.pvs{padding-bottom:2em;padding-top:2em;}.pvl{padding-bottom:4em;padding-top:4em;}.pbl{padding-bottom:4em;}.pbm{padding-bottom:2em;}header,section,footer{padding:1em;}.list{list-style-type:none;}dl,dd,dt{margin:0;padding:0;}p{font-size:20px;line-height:1.5;max-width:48em;}.btn--full{margin-bottom:.5em;}.f2{font-size:20px;}.f3{font-size:14px;}pre{overflow:auto;}code{width:100%;line-height:1.6;}.btn--github{transition:all.4s;-webkit-transition:all.4s;background:url(svg/octocat.svg)no-repeat;background-size:contain;padding-left:2em;opacity:0.6;}.btn--twitter{transition:all.4s;-webkit-transition:all.4s;background:url(svg/twitter.svg)no-repeat;background-size:contain;padding-left:2em;opacity:0.6;}.white{color:rgba(255,255,255,0.7);}.mt{margin-top:3em;}.btn--header,.btn--header:link,.btn--header:visited{color:rgba(255,255,255,.6);border:2px solid rgba(255,255,255,.4);}.btn--header:hover{color:rgba(255,255,255,.8);border:2px solid rgba(255,255,255,.6);}.btn--header:hover.btn--github{-webkit-transition:all.3s;opacity:.9;}.thin{font-weight:100;}.title{text-transform:uppercase;letter-spacing:.2em;}.track{letter-spacing:.13em;}@media screen and(min-width:48em){.mega{font-size:4em;}header,section,footer{padding:2em;}}@media screen and(min-width:64em){section,footer{padding:2em4em;}header{padding:6em 2em!important;}}
</style>
</head>
<body>
<header class="bb pvs" style="background: #111 url(http://mrmrs.io/btns/header-rev.jpg) no-repeat bottom center; background-size: cover; ">
<h1 class="mega track">BTNS</h1>
<h2 class="pbm">
A small css module for building beautiful, responsive buttons.
</h2>
<h3 class="white title thin" style="font-size: 14px;">Get the code</h3>
<a href="http://github.com/mrmrs/btns" class="btn btn--m btn--header mrs mbs"><i class="btn--github"></i>View on github</a>
<a href="https://twitter.com/intent/tweet?text=A small css module for building beautiful, responsive buttons:&url=http://mrmrs.io/btns/" target="_blank" class="btn btn--m btn--header">
<i class="btn--twitter"></i>
Tweet This
</a>
<p class="white f3 mt">...or install with npm </p>
<code class="white f2">npm install --save-dev btns</code>
<br>
<br>
</header>
<main>
<section>
<p>
This light-weight* css module is a set simple utilities you can use to create a variety of button style links. Easily customize or extend btns.css to fit your sites styles.
</p>
<small>* 663B gzipped and minified.</small>
</section>
<section class="bb pbl">
<h2 class="title">The default button</h2>
<pre>
<code>
<a href="#" class="btn">A Button<a>
</code>
</pre>
<a href="#" class="btn">A Button</a>
<pre>
</pre>
</section>
<section class="bb pbl">
<h2 class="title">Button Sizes</h2>
<p>
By default the base button class does not declare a font-size, so it is naturally set to 1em.
Extensions to the <code>.btn</code> class are available for an additional three sizes: <b>small</b>, <b>medium</b>, and <b>large</b>.
</p>
<p>
If you'd like to extend or customize the size of the buttons, it's incredibly easy. Just apply a new font-size to the button and watch it shrink/grow.
</p>
<pre>
<code>
<a href="#" class="btn btn--l">A Button<a>
<a href="#" class="btn">A Button<a>
<a href="#" class="btn btn--m">A Button<a>
<a href="#" class="btn btn--s">A Button<a>
</code>
</pre>
<div class="dib mrs">
<a href="#" class="btn btn--l">Large Button</a>
</div>
<div class="dib mrs">
<a href="#" class="btn">Default Button</a>
</div>
<div class="dib mrs">
<a href="#" class="btn btn--m">Medium Button</a>
</div>
<div class="dib mrs">
<a href="#" class="btn btn--s">Small Button</a>
</div>
</section>
<section>
<h2 class="title">Button Skins</h2>
<div>
<h3>Black & White</h3>
<pre>
<code>
<a href="#" class="btn btn--m btn--black">A button link</a>
<a href="#" class="btn btn--m btn--white">A button link</a>
</code>
</pre>
<a href="#" class="btn btn--m btn--black">A button link</a>
<a href="#" class="btn btn--m btn--black">View on <b>github</b></a>
<a href="#" class="btn btn--m btn--black">Download <b>.zip</b></a>
<a href="#" class="btn btn--m btn--black">Sign Up ▸</a>
</div>
<div>
<a href="#" class="btn btn--m">A button link</a>
<a href="#" class="btn btn--m">View on <b>github</b></a>
<a href="#" class="btn btn--m">Download a <b>.zip</b></a>
<a href="#" class="btn btn--m">View more ▸</a>
</div>
</section>
<section>
<h3>The grays</h3>
<pre>
<code>
<a href="#" class="btn btn--m btn--gray">A button link</a>
<a href="#" class="btn btn--m btn--gray-dark">A button link</a>
<a href="#" class="btn btn--m btn--gray-border">A button link</a>
</code>
</pre>
<div>
<a href="#" class="btn btn--m btn--gray">A button link</a>
<a href="#" class="btn btn--m btn--gray">View on <b>github</b></a>
<a href="#" class="btn btn--m btn--gray">Download a <b>.zip</b></a>
<a href="#" class="btn btn--m btn--gray">View more ▸</a>
</div>
<div>
<a href="#" class="btn btn--m btn--gray-dark">A button link</a>
<a href="#" class="btn btn--m btn--gray-dark">View on <b>github</b></a>
<a href="#" class="btn btn--m btn--gray-dark">Download a <b>.zip</b></a>
<a href="#" class="btn btn--m btn--gray-dark">View more ▸</a>
</div>
<div>
<a href="#" class="btn btn--m btn--gray-border">A button link</a>
<a href="#" class="btn btn--m btn--gray-border">View on <b>github</b></a>
<a href="#" class="btn btn--m btn--gray-border">Download a <b>.zip</b></a>
<a href="#" class="btn btn--m btn--gray-border">View more ▸</a>
</div>
</section>
<section class="bb pbl">
<h3>The blues</h3>
<pre>
<code class="no-wrap">
<a href="#" class="btn btn--m btn--blue">A button link</a>
</code>
</pre>
<a href="#" class="btn btn--m btn--blue">A button link</a>
<a href="#" class="btn btn--m btn--blue">View on github</a>
<a href="#" class="btn btn--m btn--blue">Download a .zip</a>
<a href="#" class="btn btn--m btn--blue">View more ▸</a>
</section>
<section>
<h3>Block buttons</h3>
<p>Avoid having buttons that are obscenely large on tablets and desktop with the <code>.btn--full</code> extension.</p>
<p>Centered, full-width on mobile, with a max-width of 16em on larger screens.</p>
<a href="#" class="btn btn--s btn--full btn--black">Save</a>
<a href="#" class="btn btn--m btn--full btn--white">Submit</a>
<a href="#" class="btn btn--full btn--gray">Cancel</a>
<a href="#" class="btn btn--l btn--full btn--blue">Sign Up</a>
</section>
</main>
<footer class="bt">
<div class="tc">
<a href="https://twitter.com/share" class="twitter-share-button" data-text="A small css module for building beautiful, responsive buttons." data-via="mrmrs_" data-size="large">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<p class="small">Built by <a href="http://mrmrs.io/">mrmrs</a></p>
<small>Dedicated to <a href="http://www.cutecatgifs.com/wp-content/uploads/2014/05/p4bg.gif">HK</a></small>
<br>
<small>btns v1.0.0 - License: MIT</small>
</footer>
</body>
</html>