Skip to content

Commit 49455df

Browse files
author
mrmrs
committed
Add more button style links
1 parent 4b9b3e7 commit 49455df

File tree

4 files changed

+272
-44
lines changed

4 files changed

+272
-44
lines changed

‎src/components/buttons/basic-rounded-extra-small.html

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{{{
2+
"bodyClass" : "bg-white pt5"
3+
}}}
4+
5+
<div class="ph3">
6+
<h1 class="f6 fw6 ttu tracked">Basic button</h1>
7+
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
8+
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-near-black" href="#0">Button Text</a>
9+
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-dark-gray" href="#0">Button Text</a>
10+
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-mid-gray" href="#0">Button Text</a>
11+
</div>
12+
<div class="ph3">
13+
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-purple" href="#0">Button Text</a>
14+
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-light-purple" href="#0">Button Text</a>
15+
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-hot-pink" href="#0">Button Text</a>
16+
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-dark-pink" href="#0">Button Text</a>
17+
</div>
18+
<div class="ph3">
19+
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-navy" href="#0">Button Text</a>
20+
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-dark-blue" href="#0">Button Text</a>
21+
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-dark-green" href="#0">Button Text</a>
22+
</div>
23+
<div class="ph3 mt4">
24+
<h1 class="f6 fw6 ttu tracked">Basic Button with Thin Border</h1>
25+
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib black" href="#0">Button Text</a>
26+
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
27+
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
28+
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
29+
</div>
30+
<div class="ph3">
31+
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
32+
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
33+
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
34+
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
35+
</div>
36+
<div class="ph3">
37+
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
38+
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
39+
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
40+
</div>
41+
<div class="ph3 mt4">
42+
<h1 class="f6 fw6 ttu tracked">Basic Button with Border</h1>
43+
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
44+
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
45+
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
46+
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
47+
</div>
48+
<div class="ph3">
49+
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
50+
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
51+
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
52+
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
53+
</div>
54+
<div class="ph3">
55+
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
56+
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
57+
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
58+
</div>
59+
<div class="ph3 mt4">
60+
<h1 class="f6 fw6 ttu tracked">Basic Button with Thick Border</h1>
61+
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
62+
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
63+
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
64+
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
65+
</div>
66+
<div class="ph3">
67+
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
68+
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
69+
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
70+
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
71+
</div>
72+
<div class="ph3 mb4">
73+
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
74+
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
75+
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
76+
</div>

‎src/components/buttons/basic-rounded-small.html

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{{{
2+
"bodyClass" : "bg-white pt5"
3+
}}}
4+
5+
<div class="ph3">
6+
<h1 class="f6 fw6 ttu tracked">Basic button</h1>
7+
<a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
8+
<a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-near-black" href="#0">Button Text</a>
9+
<a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-gray" href="#0">Button Text</a>
10+
<a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-mid-gray" href="#0">Button Text</a>
11+
</div>
12+
<div class="ph3">
13+
<a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-purple" href="#0">Button Text</a>
14+
<a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-light-purple" href="#0">Button Text</a>
15+
<a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-hot-pink" href="#0">Button Text</a>
16+
<a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-pink" href="#0">Button Text</a>
17+
</div>
18+
<div class="ph3">
19+
<a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-navy" href="#0">Button Text</a>
20+
<a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-blue" href="#0">Button Text</a>
21+
<a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-green" href="#0">Button Text</a>
22+
</div>
23+
<div class="ph3 mt4">
24+
<h1 class="f6 fw6 ttu tracked">Basic Button with Thin Border</h1>
25+
<a class="f6 link dim br2 ba ph3 pv2 mb2 dib black" href="#0">Button Text</a>
26+
<a class="f6 link dim br2 ba ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
27+
<a class="f6 link dim br2 ba ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
28+
<a class="f6 link dim br2 ba ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
29+
</div>
30+
<div class="ph3">
31+
<a class="f6 link dim br2 ba ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
32+
<a class="f6 link dim br2 ba ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
33+
<a class="f6 link dim br2 ba ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
34+
<a class="f6 link dim br2 ba ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
35+
</div>
36+
<div class="ph3">
37+
<a class="f6 link dim br2 ba ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
38+
<a class="f6 link dim br2 ba ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
39+
<a class="f6 link dim br2 ba ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
40+
</div>
41+
<div class="ph3 mt4">
42+
<h1 class="f6 fw6 ttu tracked">Basic Button with Border</h1>
43+
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
44+
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
45+
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
46+
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
47+
</div>
48+
<div class="ph3">
49+
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
50+
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
51+
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
52+
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
53+
</div>
54+
<div class="ph3">
55+
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
56+
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
57+
<a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
58+
</div>
59+
<div class="ph3 mt4">
60+
<h1 class="f6 fw6 ttu tracked">Basic Button with Thick Border</h1>
61+
<a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
62+
<a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
63+
<a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
64+
<a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
65+
</div>
66+
<div class="ph3">
67+
<a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
68+
<a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
69+
<a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
70+
<a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
71+
</div>
72+
<div class="ph3 mb4">
73+
<a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
74+
<a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
75+
<a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
76+
</div>

‎src/components/buttons/basic-rounded.html

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{{{
2+
"bodyClass" : "bg-white pt5"
3+
}}}
4+
5+
<div class="ph3">
6+
<h1 class="f6 fw6 ttu tracked">Basic button</h1>
7+
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
8+
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-near-black" href="#0">Button Text</a>
9+
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-gray" href="#0">Button Text</a>
10+
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-mid-gray" href="#0">Button Text</a>
11+
</div>
12+
<div class="ph3">
13+
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-purple" href="#0">Button Text</a>
14+
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-light-purple" href="#0">Button Text</a>
15+
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-hot-pink" href="#0">Button Text</a>
16+
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-pink" href="#0">Button Text</a>
17+
</div>
18+
<div class="ph3">
19+
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-navy" href="#0">Button Text</a>
20+
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-blue" href="#0">Button Text</a>
21+
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-green" href="#0">Button Text</a>
22+
</div>
23+
<div class="ph3 mt4">
24+
<h1 class="f6 fw6 ttu tracked">Basic Button with Thin Border</h1>
25+
<a class="f6 link dim br3 ba ph3 pv2 mb2 dib black" href="#0">Button Text</a>
26+
<a class="f6 link dim br3 ba ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
27+
<a class="f6 link dim br3 ba ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
28+
<a class="f6 link dim br3 ba ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
29+
</div>
30+
<div class="ph3">
31+
<a class="f6 link dim br3 ba ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
32+
<a class="f6 link dim br3 ba ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
33+
<a class="f6 link dim br3 ba ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
34+
<a class="f6 link dim br3 ba ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
35+
</div>
36+
<div class="ph3">
37+
<a class="f6 link dim br3 ba ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
38+
<a class="f6 link dim br3 ba ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
39+
<a class="f6 link dim br3 ba ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
40+
</div>
41+
<div class="ph3 mt4">
42+
<h1 class="f6 fw6 ttu tracked">Basic Button with Border</h1>
43+
<a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
44+
<a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
45+
<a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
46+
<a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
47+
</div>
48+
<div class="ph3">
49+
<a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
50+
<a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
51+
<a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
52+
<a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
53+
</div>
54+
<div class="ph3">
55+
<a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
56+
<a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
57+
<a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
58+
</div>
59+
<div class="ph3 mt4">
60+
<h1 class="f6 fw6 ttu tracked">Basic Button with Thick Border</h1>
61+
<a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
62+
<a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
63+
<a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
64+
<a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
65+
</div>
66+
<div class="ph3">
67+
<a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
68+
<a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
69+
<a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
70+
<a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
71+
</div>
72+
<div class="ph3 mb4">
73+
<a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
74+
<a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
75+
<a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
76+
</div>

0 commit comments

Comments
 (0)