mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
184 lines
8.7 KiB
HTML
184 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<meta name="description" content="Add styled buttons to your app with minimal effort.">
|
||
<link rel="icon" href="../source/img/favicon.png">
|
||
<link rel="stylesheet" href="../dist/shoelace.css">
|
||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||
<title>Buttons</title>
|
||
</head>
|
||
<body>
|
||
|
||
<header id="head" class="text-center">
|
||
<h1>
|
||
<a href="../index.html">
|
||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||
</a>
|
||
</h1>
|
||
<p class="text-secondary text-small">
|
||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||
</p>
|
||
</header>
|
||
|
||
<main id="wrap">
|
||
<nav id="nav">
|
||
<a href="installing.html">Installing</a>
|
||
<a href="customizing.html">Customizing</a>
|
||
<a href="content.html">Content</a>
|
||
<a href="alerts.html">Alerts</a>
|
||
<a href="badges.html">Badges</a>
|
||
<a href="buttons.html">Buttons</a>
|
||
<a href="dropdowns.html">Dropdowns</a>
|
||
<a href="forms.html">Forms</a>
|
||
<a href="loaders.html">Loaders</a>
|
||
<a href="progress-bars.html">Progress Bars</a>
|
||
<a href="switches.html">Switches</a>
|
||
<a href="tabs.html">Tabs</a>
|
||
<a href="tables.html">Tables</a>
|
||
<a href="utilities.html">Utilities</a>
|
||
<a href="grid-system.html">Grid System</a>
|
||
<a href="icons.html">Icons</a>
|
||
<a href="browser-support.html">Browser Support</a>
|
||
<a href="attribution.html">Attribution</a>
|
||
</nav>
|
||
|
||
<div id="content">
|
||
<h2 id="buttons">Buttons</h2>
|
||
<p>To create a button, use the <code><button></code> element or apply the <code>button</code> class to an <code><a></code>.</p>
|
||
<pre><code class="lang-html"><button type="button">Button</button>
|
||
</code></pre>
|
||
<div class="input-single">
|
||
<button type="button">Button</button>
|
||
</div>
|
||
|
||
<p>Use the <code>button-small</code> and <code>button-big</code> modifiers to change the size of a button.</p>
|
||
<pre><code class="lang-html"><button type="button" class="button-small">Small Button</button>
|
||
<button type="button">Normal Button</button>
|
||
<button type="button" class="button-big">Big Button</button>
|
||
</code></pre>
|
||
<div class="input-single">
|
||
<button type="button" class="button-small">Small Button</button>
|
||
<button type="button">Normal Button</button>
|
||
<button type="button" class="button-big">Big Button</button>
|
||
</div>
|
||
|
||
<p>Use the <code>button-block</code> modifier to make a button span the entire width of its parent.</p>
|
||
<pre><code class="lang-html"><button type="button" class="button-block button-small">Small Block Button</button>
|
||
<button type="button" class="button-block">Normal Block Button</button>
|
||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||
</code></pre>
|
||
<div class="input-single">
|
||
<button type="button" class="button-block button-small">Small Block Button</button>
|
||
</div>
|
||
|
||
<div class="input-single">
|
||
<button type="button" class="button-block">Normal Block Button</button>
|
||
</div>
|
||
|
||
<div class="input-single">
|
||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||
</div>
|
||
|
||
<p>To disable a button set the <code>disabled</code> property on <code><button></code> elements.</p>
|
||
<pre><code class="lang-html"><button type="button" disabled>Disabled</button>
|
||
</code></pre>
|
||
<div class="input-single">
|
||
<button type="button" disabled>Disabled</button>
|
||
</div>
|
||
|
||
<p>You can force buttons to have an active state by applying the <code>active</code> class.</p>
|
||
<pre><code class="lang-html"><button type="button" class="active">Active</button>
|
||
</code></pre>
|
||
<div class="input-single">
|
||
<button type="button" class="active">Active</button>
|
||
</div>
|
||
|
||
<h3 id="variations">Variations</h3>
|
||
<p>Use the <code>button-*</code> modifier to create variations.</p>
|
||
<pre><code class="lang-html"><button type="button">Primary</button>
|
||
<button type="button" class="button-secondary">Secondary</button>
|
||
<button type="button" class="button-success">Success</button>
|
||
<button type="button" class="button-info">Info</button>
|
||
<button type="button" class="button-warning">Warning</button>
|
||
<button type="button" class="button-danger">Danger</button>
|
||
<button type="button" class="button-light">Light</button>
|
||
<button type="button" class="button-dark">Dark</button>
|
||
</code></pre>
|
||
<div class="input-single">
|
||
<button type="button">Primary</button>
|
||
<button type="button" class="button-secondary">Secondary</button>
|
||
<button type="button" class="button-success">Success</button>
|
||
<button type="button" class="button-info">Info</button>
|
||
<button type="button" class="button-warning">Warning</button>
|
||
<button type="button" class="button-danger">Danger</button>
|
||
<button type="button" class="button-light">Light</button>
|
||
<button type="button" class="button-dark">Dark</button>
|
||
</div>
|
||
|
||
<h3 id="link-buttons">Link Buttons</h3>
|
||
<p>Buttons can be styled to look like normal links with the <code>button-link</code> modifier. Button sizing is maintained so they align properly with other buttons.</p>
|
||
<pre><code class="lang-html"><button type="button">Button</button>
|
||
<a href="#" class="button button-link">Link</a>
|
||
</code></pre>
|
||
<div class="input-single">
|
||
<button type="button">Button</button>
|
||
<a href="#" class="button button-link">Link</a>
|
||
</div>
|
||
|
||
<h3 id="file-buttons">File Buttons</h3>
|
||
<p>File inputs are notoriously hard to style properly in every browser. Shoelace offers file buttons as an alternative. These are much easier to style consistently, but come with the caveat that the name (or number) of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an <a href="https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file">exercise for the user</a>.</p>
|
||
<p>File buttons are simply <code><label></code> elements with the <code>button</code> class and a nested file input.</p>
|
||
<pre><code class="lang-html"><label class="button">
|
||
Select File
|
||
<input type="file">
|
||
</label>
|
||
</code></pre>
|
||
<div class="input-single">
|
||
<label class="button">Select File <input type="file"></label>
|
||
</div>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<footer id="foot">
|
||
<a href="../index.html">
|
||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||
</a>
|
||
<p class="text-small text-secondary">
|
||
Shoelace.css 1.0.0-beta15 ·
|
||
© A Beautiful Site, LLC
|
||
</p>
|
||
|
||
<p class="margin-y-small text-center">
|
||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||
</p>
|
||
<p>
|
||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||
</p>
|
||
</footer>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||
<script src="../dist/shoelace.js"></script>
|
||
<script>
|
||
$(function() {
|
||
// Highlight current nav item
|
||
$('#nav a').each(function() {
|
||
if(this.pathname === location.pathname) {
|
||
$(this).addClass('current');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||
</body>
|
||
</html>
|