We provide button styling for HTML <button> and <a class="button"> elements.
A button has three substyles: [default], .text and .call-to-action. All three styles support styled pseudo-classes for :active, :hover, and :disabled
Examples
| Demo | Code | Description |
|---|
| <button>Default</button> | A default button |
| <button class="text">Text</button> | A text button |
| <button class="call-to-action">Call to Action</button> | A call to action button |
| Demo | Code | Description |
|---|
| <button disabled>Default</button> | A default disabled button |
| <button class="text" disabled>Text</button> | A text disabled button |
| <button class="call-to-action" disabled>Call to Action</button> | A call to action disabled button |
Links
| Demo | Code | Description |
|---|
| Default | <a class="button">Default</a> | A default link button |
| Text | <a class="button text">Text</a> | A text link button |
| Call to Action | <a class="button call-to-action">Call to Action</a> | A call to action link button |
| Demo | Description |
|---|
| A floating action button |
| A floating action button with text |
| A Secondary action button |
| A small and secondary action button |
<button class="[ | text | call-to-action ]">
<cn-icon noun="gamepad"></cn-icon>
Example
</button>