mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 20:19:13 +00:00
162 lines
7.9 KiB
HTML
162 lines
7.9 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-muted 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 another element such as an <code><a></code>. You can change a button’s appearance using the <code>button-*</code> modifier.</p>
|
||
<pre><code class="lang-html"><button type="button">Default</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-inverse">Inverse</button>
|
||
<button type="button" class="button button-link">Link</button>
|
||
</code></pre>
|
||
<div class="input-single">
|
||
<button type="button">Default</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-inverse">Inverse</button>
|
||
<button type="button" class="button-link">Link</button>
|
||
</div>
|
||
|
||
<p>Use the <code>button-small</code> and <code>button-big</code> modifiers to change the size of a button.</p>
|
||
<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 the button span the entire width of its parent element. You can also mix and match modifiers as needed.</p>
|
||
<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>Disabled buttons look like this. Set the <code>disabled</code> property on <code><button></code> elements to achieve this effect. For all other elements, apply <code>class="disabled"</code> instead.</p>
|
||
<div class="input-single">
|
||
<button type="button" disabled>Default</button>
|
||
<button type="button" class="button-success" disabled>Success</button>
|
||
<button type="button" class="button-info" disabled>Info</button>
|
||
<button type="button" class="button-warning" disabled>Warning</button>
|
||
<button type="button" class="button-danger" disabled>Danger</button>
|
||
<button type="button" class="button-inverse" disabled>Inverse</button>
|
||
</div>
|
||
|
||
<p>You can force buttons to have an active state by applying the <code>active</code> class.</p>
|
||
<div class="input-single">
|
||
<button type="button" class="active">Default</button>
|
||
<button type="button" class="button-success active">Success</button>
|
||
<button type="button" class="button-info active">Info</button>
|
||
<button type="button" class="button-warning active">Warning</button>
|
||
<button type="button" class="button-danger active">Danger</button>
|
||
<button type="button" class="button-inverse active">Inverse</button>
|
||
</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-muted">
|
||
Shoelace.css 1.0.0-beta13 ·
|
||
© 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>
|