js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
04d889b7c09f0ec0577896fd75fc190382d48a4a
webawesome/docs/buttons.html
Martijn van der Ven c4161b7251 Switch RawGit to unpkg (#85) 
* Switch RawGit to unpkg

* Switch RawGit to unpkg in docs

* Switch RawGit to unpkg in layout
2019-08-05 09:53:37 -04:00

221 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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://unpkg.com/prism-theme-one-dark@1.0.0/prism-onedark.css" integrity="sha384-WBhzd+87GQqNnqPLNAn5C7FAa8F/UuNpjW2vcLo8iVyvvT3LxuGZh6xoQYPTq0Tw" crossorigin="anonymous">
<title>Buttons</title>
</head>
<body>
<a href="#content" class="skip">Skip to content</a>
<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 class="container">
<div class="row">
<nav class="col-md-3">
<ul id="nav">
<li><a href="installing.html">Installing</a></li>
<li><a href="customizing.html">Customizing</a></li>
<li><a href="content.html">Content</a></li>
<li><a href="alerts.html">Alerts</a></li>
<li><a href="badges.html">Badges</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="dropdowns.html">Dropdowns</a></li>
<li><a href="file-buttons.html">File Buttons</a></li>
<li><a href="forms.html">Forms</a></li>
<li><a href="grid-system.html">Grid System</a></li>
<li><a href="loaders.html">Loaders</a></li>
<li><a href="progress-bars.html">Progress Bars</a></li>
<li><a href="switches.html">Switches</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="tables.html">Tables</a></li>
<li><a href="utilities.html">Utilities</a></li>
<li><a href="icons.html">Icons</a></li>
<li><a href="browser-support.html">Browser Support</a></li>
<li><a href="attribution.html">Attribution</a></li>
</ul>
</nav>
<div class="col-md-9">
<div id="content">
<h2 id="buttons">Buttons</h2>
<p>To create a button, use the <code>&lt;button&gt;</code> element or apply the <code>button</code> class to an <code>&lt;a&gt;</code>.</p>
<pre><code class="lang-html">&lt;button type=&quot;button&quot;&gt;Button&lt;/button&gt;
</code></pre>
<div class="input-field">
<button type="button">Button</button>
</div>
<p>Use the <code>button-[xs|sm|lg|xl]</code> modifiers to change the size of a button.</p>
<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-xs&quot;&gt;XS Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-sm&quot;&gt;SM Button&lt;/button&gt;
&lt;button type=&quot;button&quot;&gt;Default Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-lg&quot;&gt;LG Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-xl&quot;&gt;XL Button&lt;/button&gt;
</code></pre>
<div class="input-field">
<button type="button" class="button-xs">XS Button</button>
<button type="button" class="button-sm">SM Button</button>
<button type="button">Default Button</button>
<button type="button" class="button-lg">LG Button</button>
<button type="button" class="button-xl">XL Button</button>
</div>
<p>To disable a button set the <code>disabled</code> property on <code>&lt;button&gt;</code> elements. You can simulate the disabled state on links by adding the <code>disabled</code> class, but additional JavaScript is required to prevent them from being activated.</p>
<pre><code class="lang-html">&lt;button type=&quot;button&quot; disabled&gt;Disabled Button&lt;/button&gt;
&lt;a href=&quot;#&quot; class=&quot;button disabled&quot;&gt;Disabled Link&lt;/a&gt;
</code></pre>
<div class="input-field">
<button type="button" disabled>Disabled Button</button>
<a href="#" class="button disabled">Disabled Link</a>
</div>
<p>You can force buttons to have an active state by applying the <code>active</code> class.</p>
<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;active&quot;&gt;Active Button&lt;/button&gt;
&lt;a href=&quot;#&quot; class=&quot;button active&quot;&gt;Active Link&lt;/a&gt;
</code></pre>
<div class="input-field">
<button type="button" class="active">Active Button</button>
<a href="#" class="button active">Active Link</a>
</div>
<h3 id="variations">Variations</h3>
<p>Use the <code>button-*</code> modifier to create variations.</p>
<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-secondary&quot;&gt;Secondary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-success&quot;&gt;Success&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-info&quot;&gt;Info&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-warning&quot;&gt;Warning&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-danger&quot;&gt;Danger&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-light&quot;&gt;Light&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-dark&quot;&gt;Dark&lt;/button&gt;
</code></pre>
<div class="input-field">
<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="block-buttons">Block Buttons</h3>
<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">&lt;button type=&quot;button&quot; class=&quot;button-block&quot;&gt;Block Button&lt;/button&gt;
</code></pre>
<div class="input-field">
<button type="button" class="button-block">Block Button</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">&lt;a href=&quot;#&quot; class=&quot;button button-link&quot;&gt;Link Button&lt;/a&gt;
</code></pre>
<div class="input-field">
<a href="#" class="button button-link">Link Button</a>
</div>
<h3 id="loader-buttons">Loader Buttons</h3>
<p>Buttons can be given a loading state with the <code>button-loader</code> modifier. This will make the button text invisible and display a loader using the <code>::after</code> pseudo-element. The button’s width will not be affected.</p>
<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-loader button-xs&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-sm&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-lg&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-xl&quot;&gt;Button&lt;/button&gt;
</code></pre>
<div class="input-field">
<button type="button" class="button-loader button-xs">Button</button>
<button type="button" class="button-loader button-sm">Button</button>
<button type="button" class="button-loader">Button</button>
<button type="button" class="button-loader button-lg">Button</button>
<button type="button" class="button-loader button-xl">Button</button>
</div>
<p>Loader buttons also work with button variations.</p>
<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-loader button-secondary&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-success&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-info&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-warning&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-danger&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-light&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-dark&quot;&gt;Button&lt;/button&gt;
</code></pre>
<div class="input-field">
<button type="button" class="button-loader button-secondary">Button</button>
<button type="button" class="button-loader button-success">Button</button>
<button type="button" class="button-loader button-info">Button</button>
<button type="button" class="button-loader button-warning">Button</button>
<button type="button" class="button-loader button-danger">Button</button>
<button type="button" class="button-loader button-light">Button</button>
<button type="button" class="button-loader button-dark">Button</button>
</div>
</div>
</div>
</main>
<footer id="foot" role="contentinfo">
<a href="../index.html">
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
</a>
<p class="text-small text-secondary">
1.0.0-beta24
</p>
<p class="mar-y-sm 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>
<p class="text-small text-secondary">
<a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
&copy; A Beautiful Site, LLC
</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');
}
});
// Intercept dropdown clicks for the demo
$('.dropdown').on('select', function(event) {
event.preventDefault();
});
});
</script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink