-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbutton.html
149 lines (128 loc) · 8.92 KB
/
button.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DS in CSS - Button</title>
<link rel="shortcut icon" href="https://cdn.casebook.net/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="./css/styles.css">
</head>
<body class="cb-baseline">
<main class="cb-main">
<h1 class="cb-h4 cb-bolder"><a class="cb-link" href="./index.html">DS in CSS</a></h1>
<h2 class="cb-h5 cb-margin-bottom-large">
Buttons
</h2>
<p>You can style a button like a Casebook button with the class <code
class="cb-inline-code">.cb-button</code>. By default this will be styled like the standard button
variant.</p>
<p>Make any button text-only by adding the class <code class="cb-inline-code">.cb-text-only</code></p>
<div class="cb-margin-default-vertical cb-flex cb-gap-default cb-flex-wrap-wrap">
<button onclick="alert('Standard button');" class="cb-button">Standard button</button>
<button onclick="alert('Standard text-only button');" class="cb-button cb-text-only">Standard text-only
button</button>
<button onclick="alert('Standard button');" class="cb-button" disabled>Standard button, disabled</button>
<button onclick="alert('Standard text-only button');" class="cb-button cb-text-only" disabled>Standard button,
disabled, text-only</button>
</div>
<div class="cb-margin-default-vertical cb-flex cb-gap-default cb-flex-wrap-wrap">
<button onclick="alert('Standard button, compact');" class="cb-button cb-compact">Standard button,
compact</button>
<button onclick="alert('Standard compact text-only button');" class="cb-button cb-text-only cb-compact">Standard
compact text-only button</button>
<button onclick="alert('Standard button, compact');" class="cb-button cb-compact" disabled>Standard button,
disabled, compact</button>
<button onclick="alert('Standard compact text-only button');" class="cb-button cb-text-only cb-compact"
disabled>Standard compact text-only button, disabled</button>
</div>
<div class="cb-code-block-container">
<pre
class="cb-caption cb-monospace fullwidth cb-no-margin"><button onclick="alert('Standard button');" class="cb-button">Standard button</button>
<button onclick="alert('Standard text-only button');" class="cb-button cb-text-only">Standard text-only button</button>
<button onclick="alert('Standard button');" class="cb-button" disabled>Standard button, disabled</button>
<button onclick="alert('Standard text-only button');" class="cb-button cb-text-only" disabled>Standard button, disabled, text-only</button>
<button onclick="alert('Standard button, compact');" class="cb-button cb-compact">Standard button, compact</button>
<button onclick="alert('Standard compact text-only button');" class="cb-button cb-text-only cb-compact">Standard compact text-only button</button>
<button onclick="alert('Standard button, compact');" class="cb-button cb-compact" disabled>Standard button, disabled, compact</button>
<button onclick="alert('Standard compact text-only button');" class="cb-button cb-text-only cb-compact" disabled>Standard compact text-only button, disabled</button></pre>
</div>
<h3 id="full-width" class="cb-h6 cb-margin-bottom-large cb-margin-top-large">Full width buttons</h3>
<p>Make any button full-width by adding the class <code class="cb-inline-code">.cb-full-width</code></p>
<div class="cb-margin-default-vertical cb-flex cb-flex-direction-column cb-gap-default">
<button onclick="alert('Standard button, full width')" class="cb-button cb-full-width">Standard button, full
width</button>
<button onclick="alert('Standard button, full width')" class="cb-button cb-full-width" disabled>Standard button,
full width, disabled</button>
<button onclick="alert('Standard button, compact, full width')"
class="cb-button cb-full-width cb-compact">Standard button, compact, full width</button>
<button onclick="alert('Standard button, compact, full width')" class="cb-button cb-full-width cb-compact"
disabled>Standard button, compact, full width,
disabled</button>
</div>
<div class="cb-code-block-container">
<pre
class="cb-caption cb-monospace fullwidth cb-no-margin"><button onclick="alert('Standard button, full width')" class="cb-button cb-full-width">Standard button, full width</button>
<button onclick="alert('Standard button, full width')" class="cb-button cb-full-width" disabled>Standard button, full width, disabled</button>
<button onclick="alert('Standard button, compact, full width')" class="cb-button cb-full-width cb-compact">Standard button, compact, full width</button>
<button onclick="alert('Standard button, compact, full width')" class="cb-button cb-full-width cb-compact" disabled>Standard button, compact, full width, disabled</button></pre>
</div>
<div id="variants">
<h3 class="cb-h6 cb-margin-bottom-large cb-margin-top-large">Variants</h3>
<h4 id="primary" class="cb-callout cb-margin-bottom-large cb-margin-top-large">Primary</h4>
<p>Make a button primary by adding the class <code class="cb-inline-code">.cb-primary</code></p>
<div class="margin-default-vertical cb-flex cb-gap-default cb-flex-wrap-wrap">
<button onclick="alert('Primary button')" class="cb-button cb-primary">Primary button</button>
<button onclick="alert('Primary text-only button')" class="cb-button cb-primary cb-text-only">Primary text-only
button</button>
</div>
<div class="cb-code-block-container">
<pre
class="cb-caption cb-monospace fullwidth cb-no-margin"><button onclick="alert('Primary button')" class="cb-button cb-primary">Primary button</button>
<button onclick="alert('Primary text-only button')" class="cb-button cb-primary cb-text-only">Primary text-only button</button></pre>
</div>
<h4 id="workflow-secondary" class="cb-callout cb-margin-bottom-large cb-margin-top-large">Workflow</h4>
<p>Make a button workflow by adding the class <code class="cb-inline-code">.cb-workflow</code></p>
<div class="cb-margin-default-vertical cb-flex cb-gap-default cb-flex-wrap-wrap">
<button onclick="alert('Workflow (secondary) button');" class="cb-button cb-workflow">Workflow (secondary)
button</button>
<button onclick="alert('Workflow (secondary) text-only button');"
class="cb-button cb-workflow cb-text-only">Workflow (secondary) text-only button</button>
</div>
<div class="cb-code-block-container">
<pre
class="cb-caption cb-monospace fullwidth cb-no-margin"><button onclick="alert('Workflow (secondary) button');" class="cb-button cb-workflow">Workflow (secondary) button</button>
<button onclick="alert('Workflow (secondary) text-only button');" class="cb-button cb-workflow cb-text-only">Workflow (secondary) text-only button</button></pre>
</div>
<h4 id="destructive" class="cb-callout cb-margin-bottom-large cb-margin-top-large">Destructive</h4>
<p>Make a button destructive by adding the class <code class="cb-inline-code">.cb-destructive</code></p>
<div class="cb-margin-default-vertical cb-flex cb-gap-default cb-flex-wrap-wrap">
<button onclick="alert('Destructive button');" class="cb-button cb-destructive">Destructive button</button>
<button onclick="alert('Destructive text-only button');"
class="cb-button cb-destructive cb-text-only">Destructive
text-only button</button>
</div>
<div class="cb-code-block-container">
<pre
class="cb-caption cb-monospace fullwidth cb-no-margin"><button onclick="alert('Destructive button');" class="cb-button cb-destructive">Destructive button</button>
<button onclick="alert('Destructive text-only button');" class="cb-button cb-destructive cb-text-only">Destructive text-only button</button></pre>
</div>
</div>
<h3 id="links" class="cb-h6 cb-margin-bottom-large cb-margin-top-large">Links styled as buttons</h3>
<p>in the examples above, an HTML <code class="cb-inline-code"><button></code> element was used, but the
class <code class="cb-inline-code">.cb-button</code> can also be applied to other elements. Here's an HTML
<code class="cb-inline-code"><a></code> element styled like a Casebook button:
</p>
<div class="cb-margin-default-vertical">
<a class="cb-button cb-primary" href="#links">
Link styled like a button
</a>
</div>
<div class="cb-code-block-container">
<pre><a class="cb-button cb-primary" href="#links">
Link styled like a button
</a></pre>
</div>
</main>
</body>
</html>