Metronic | Buttons

Hi, Sean

Buttons

Base Buttons

Metronic extends Bootstrap Button component with a variety of options to provide uniquely looking Button component that matches the Metronic's design standards.
For more info please visit the plugin's Documentation.

Basic Buttons

Bootstrap buttons:

The .btn classes are designed to be used with <button>, <a> and <input> elements.

Link Dark

Button states:

Metronic custom buttons:

Metronic base buttons:

Button Customization

Large buttons:

Small buttons:

Font settings:

Wide buttons:

Tall buttons:

Outline Buttons

Default outline buttons:

Hover outline buttons:

Elevated Buttons

Default effect:

Hover elevate effect:

Pill Buttons

Default options:

Elevation options:

Square Buttons

Default options:

Elevation options:

With Icons

Default options with Fontawesome 5 icons:

Elevation options with Lineawesome icons:

Pill options with Flaticon icons:

Size options:

Social network solid buttons:

Facebook Twitter Google Instagram Linkedin

Social network label buttons:

Facebook Twitter Google Instagram Linkedin

Icon Only

Default options with Fontawesome 5 icons:

Elevation options with Lineawesome icons:

Circle options with Flaticon icons:

Size options:

Social network icon buttons:

Label Style

You can use the buttons styles for labels with span tag:

Primary Success Info Danger Warning

Label pill style:

Primary Success Info Danger Warning

Link labels:

Primary Success Info Danger Warning

Select A Demo

Deprecated: Return type of Adbar\Dot::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 390

Deprecated: Return type of Adbar\Dot::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 401

Deprecated: Return type of Adbar\Dot::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 412

Deprecated: Return type of Adbar\Dot::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 428

Deprecated: Return type of Adbar\Dot::count($key = null) should either be compatible with Countable::count(): int, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 445

Deprecated: Return type of Adbar\Dot::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 461

Deprecated: Return type of Adbar\Dot::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 477

Demo 1