Button

Buttons provide a clickable and let user take action.

content

Demo

Default version button

The button comes in three style versions: primary button, ghost button, and disabled button.

<button type="button" class="btn-primary">Primary Button</button>
<button type="button" class="btn-secondary">Secondary Button</button>
<button type="button" disabled class="btn-primary">Disabled Button</button>

Dark version button

Please add the class name .dark for the dark version of the button style.

<button type="button" class="btn-primary dark">Primary Button</button>
<button type="button" class="btn-secondary dark">Secondary Button</button>

Basic Usage

Please avoid duplicating the reference to the same CSS and JS files.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/style.css">

Reference

When to Use Ghost Buttons:

When users see two buttons, they have to think about which one to click. Visual cues on the buttons can help them decide faster. Using solid buttons for primary actions and ghost buttons for secondary actions can speed up user decision-making.

When to Use Ghost Buttons

Do

The solid button's prominent visual presence ensures its noticeability, effectively drawing attention to the main action without detracting from surrounding elements.

When to Use Ghost Buttons

Don't

The ghost button's outline blends with surrounding text, potentially leading to it being overlooked during page scanning.

content