From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/elements/buttons.html | 367 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 367 insertions(+) create mode 100644 docs/elements/buttons.html (limited to 'docs/elements/buttons.html') diff --git a/docs/elements/buttons.html b/docs/elements/buttons.html new file mode 100644 index 0000000..d887d6c --- /dev/null +++ b/docs/elements/buttons.html @@ -0,0 +1,367 @@ + + + + Buttons - Elements - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Buttons

+
+
+ + + +
+
+ + +
+
+

Buttons include simple button styles for actions in different types and sizes.

+
+
+ + + +
+
+

Add the btn class to <a>, <input> or <button> elements for a default button. + There are classes btn-primary and btn-link for predefined primary and link buttons. +

+ 
<button class="btn">default button</button>
+<button class="btn btn-primary">primary button</button>
+<button class="btn btn-link">link button</button>
+
+

Button colors

+
+
+ + +
+
+

Add the btn-success or btn-error class for success (green) or error (red) button color. + If you need more button colors, please use button mixins to create your own button color variants. +

+ 
<button class="btn btn-success">success button</button>
+<button class="btn btn-error">error button</button>
+
+

Button sizes

+
+
+ + +
+
+ + +
+
+ + +
+
+

Add the btn-sm or btn-lg class for small or large button size. + Also, you can add the btn-block class for a full-width button. +

+ 
<button class="btn btn-lg">large button</button>
+<button class="btn btn-sm">small button</button>
+
+<button class="btn btn-block">block button</button>
+
+<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
+<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
+
+

Please note that you could use the btn-action class for a square button, or add another s-circle class for a round button, which is often used as a Float Action Button (FAB).

+
+
+ + + +
+
+ + + +
+
+ 
<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
+<button class="btn btn-action s-circle"><i class="icon icon-arrow-left"></i></button>
+
+

Button states

+

Add the active class for active button state style.

+
+
+ + + +
+
+

Add the disabled class or the disabled attribute for disabled button state style.

+
+
+ + + +
+
+ 
<!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
+
+

A button with the loading class can show loading indicator.

+
+
+ + + +
+
+ 
<!-- buttons with loading state -->
+<button class="btn loading">button</button>
+<button class="btn btn-primary loading">primary button</button>
+
+

Button groups

+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+

If you want to use buttons as a group, add the btn-group class to the container. + You can add the btn-group-block class for a full-width button group. +

+ 
<div class="btn-group btn-group-block">
+  <button class="btn">first button</button>
+  <button class="btn">second button</button>
+  <button class="btn">third button</button>
+</div> 
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-23-gd82d