mirror of
https://github.com/tachyons-css/tachyons.git
synced 2026-02-06 13:36:50 +00:00
75 lines
4.3 KiB
HTML
75 lines
4.3 KiB
HTML
<div class="ph3">
|
|
<h1 class="f6 fw6 ttu tracked">Basic button</h1>
|
|
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-near-black" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-dark-gray" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-mid-gray" href="#0">Button Text</a>
|
|
</div>
|
|
<div data-name="screenshot">
|
|
<div class="ph3">
|
|
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-purple" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-light-purple" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-hot-pink" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-dark-pink" href="#0">Button Text</a>
|
|
</div>
|
|
<div class="ph3">
|
|
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-navy" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-dark-blue" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-dark-green" href="#0">Button Text</a>
|
|
</div>
|
|
</div> <!-- end screenshot -->
|
|
<div class="ph3 mt4">
|
|
<h1 class="f6 fw6 ttu tracked">Basic Button with Thin Border</h1>
|
|
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib black" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
|
|
</div>
|
|
<div class="ph3">
|
|
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
|
|
</div>
|
|
<div class="ph3">
|
|
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
|
|
</div>
|
|
<div class="ph3 mt4">
|
|
<h1 class="f6 fw6 ttu tracked">Basic Button with Border</h1>
|
|
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
|
|
</div>
|
|
<div class="ph3">
|
|
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
|
|
</div>
|
|
<div class="ph3">
|
|
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
|
|
</div>
|
|
<div class="ph3 mt4">
|
|
<h1 class="f6 fw6 ttu tracked">Basic Button with Thick Border</h1>
|
|
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
|
|
</div>
|
|
<div class="ph3">
|
|
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
|
|
</div>
|
|
<div class="ph3 mb4">
|
|
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
|
|
<a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
|
|
</div>
|