mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-05-05 15:17:11 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

build docu files buttons and forms for input-group feature

Browse source
This commit is contained in:
reinerBa 2022-02-21 23:24:53 +01:00
parent bb48582399
commit 40d8777adc
2 changed files with 14 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/buttons.html
View file

@ -3,4 +3,8 @@
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;</code></pre></footer></article><p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p><article aria-label="Buttons styles examples"><a href="#" onclick="event.preventDefault()" role="button" class="secondary">Secondary</a> <a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</a><footer class="code"><pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre></footer></article><p>And a classic <code>.outline</code> variant.</p><article aria-label="Outline style examples"><a href="#" onclick="event.preventDefault()" role="button" class="outline">Primary</a> <a href="#" onclick="event.preventDefault()" role="button" class="secondary outline">Secondary</a> <a href="#" onclick="event.preventDefault()" role="button" class="contrast outline">Contrast</a><footer class="code"><pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>&gt;Primary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary outline"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre></footer></article></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script></body></html>
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre></footer></article><p>Tie buttons together as <code>.button-group</code>.</p><article aria-label="Button group examples"><div class="button-group"><button>&NestedLessLess;</button> <button>Playing &#9835;</button> <button>&NestedGreaterGreater;</button></div><footer class="code"><pre><code>&lt;<b>div</b> <i>class</i>=<u>"button-group"</u>&gt;
&lt;<b>button</b>&gt;&NestedLessLess;&lt;<b>/button</b>&gt;
&lt;<b>button</b>&gt;Playing &#9835; &lt;<b>/button</b>&gt;
&lt;<b>button</b>&gt;&NestedGreaterGreater;&lt;<b>/button</b>&gt;
&lt;<b>/div</b>&gt;</code></pre></footer></article></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script></body></html>