<p class="lede">Use button classes on an <code><a></code>, <code><button></code>, or button-like <code><input></code> elements for consistent cross-browser styling.</p>
<div><a class="btn" href="#" role="button">Anchor</a> <button class="btn" type="submit">Button</button> <input class="btn" type="button" value="Input"> <input class="btn" type="submit" value="Submit"></div>
<h2>Button colours</h2>
<p>Use contextual button classes to quickly create buttons with meaning.</p>
<div><button type="button" class="btn">Default</button> <button type="button" class="btn btn--info">Info</button> <button type="button" class="btn btn--warning">Warning</button> <button type="button" class="btn btn--success">Success</button> <button type="button"
class="btn btn--danger">Danger</button></div>
<h3>Active state</h3>
<p>Buttons will appear pressed when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it’s done with <code>.active</code>. However, you may use <code>.active</code> on <code><button></code>s
(and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the active state.</p>
<div><button type="button" class="active btn">Default</button> <button type="button" class="active btn btn--info">Info</button> <button type="button" class="active btn btn--warning">Warning</button> <button type="button" class="active btn btn--success">Success</button> <button type="button" class="active btn btn--danger">Danger</button></div>
<h3>Disabled state</h3>
<p>Make buttons look unclickable by reducing opacity and disabling pointer events. by adding a <code>.disabled</code> class to <code><a></code> buttons.</p>
<div><button type="button" class="disabled btn">Default</button> <button type="button" class="disabled btn btn--info">Info</button> <button type="button" class="disabled btn btn--warning">Warning</button> <button type="button" class="disabled btn btn--success">Success</button> <button type="button" class="disabled btn btn--danger">Danger</button></div>
<p class="lede">Use button classes on an <code><a></code>, <code><button></code>, or button-like <code><input></code> elements for consistent cross-browser styling.</p>
<div><a class="btn" href="#" role="button">Anchor</a> <button class="btn" type="submit">Button</button> <input class="btn" type="button" value="Input"> <input class="btn" type="submit" value="Submit"></div>
<h2>Button colours</h2>
<p>Use contextual button classes to quickly create buttons with meaning.</p>
<div><button type="button" class="btn">Default</button> <button type="button" class="btn btn--info">Info</button> <button type="button" class="btn btn--warning">Warning</button> <button type="button" class="btn btn--success">Success</button> <button type="button" class="btn btn--danger">Danger</button></div>
<h3>Active state</h3>
<p>Buttons will appear pressed when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it’s done with <code>.active</code>. However, you may use <code>.active</code> on <code><button></code>s (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the active state.</p>
<div><button type="button" class="active btn">Default</button> <button type="button" class="active btn btn--info">Info</button> <button type="button" class="active btn btn--warning">Warning</button> <button type="button" class="active btn btn--success">Success</button> <button type="button" class="active btn btn--danger">Danger</button></div>
<h3>Disabled state</h3>
<p>Make buttons look unclickable by reducing opacity and disabling pointer events. by adding a <code>.disabled</code> class to <code><a></code> buttons.</p>
<div><button type="button" class="disabled btn">Default</button> <button type="button" class="disabled btn btn--info">Info</button> <button type="button" class="disabled btn btn--warning">Warning</button> <button type="button" class="disabled btn btn--success">Success</button> <button type="button" class="disabled btn btn--danger">Danger</button></div>
{
"siteName": "siteName",
"siteUrl": "/"
}
There are no notes for this item.