Examples

Atlantis Dashboard has changed the predefined button styles from Bootstrap, each serving its own semantic purpose, with a few extras thrown in for more control.

								
									<button class="btn btn-default">Default</button>
									<button class="btn btn-primary">Primary</button>
									<button class="btn btn-secondary">Primary</button>
									<button class="btn btn-info">Info</button>
									<button class="btn btn-success">Success</button>
									<button class="btn btn-warning">Warning</button>
									<button class="btn btn-danger">Danger</button>
									<button class="btn btn-light">Light</button>
									<button class="btn btn-dark">Dark</button>
									<button class="btn btn-link">Link</button>
								
							

Style buttons

								
									<button class="btn btn-primary">Default</button>
									<button class="btn btn-primary btn-border">Border</button>
									<button class="btn btn-primary btn-round">Round</button>
									<button class="btn btn-primary btn-border btn-round">Border</button>
									<button class="btn btn-primary"><span class="btn-label"><i class="flaticon-shapes"></i></span> With Icon</button>
									<button class="btn btn-primary btn-link">Link</button>
								
							

Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

								
									<button class="btn btn-primary btn-lg">Large</button>
									<button class="btn btn-primary">Normal</button>
									<button class="btn btn-primary btn-sm">Small</button>
									<button class="btn btn-primary btn-xs">Extra Small</button>
								
							

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

								
									<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
									<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
								
							

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

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

Disabled buttons using the <a> element behave a bit different:

• <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.
• Some future-friendly styles are included to disable all pointer-events on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.

								
									<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
									<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>