Tronic247 Material


Edit this page

<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="success">Success</button>
<button class="danger">Danger</button>
<button class="dark">Dark</button>

<button class="outlined primary">Outlined - Primary</button>
<button class="outlined secondary">Outlined - Secondary</button>
<button class="outlined success">Outlined - Success</button>
<button class="outlined danger">Outlined - Danger</button>
<button class="outlined dark">Outlined - Dark</button>

<button class="text primary">Text - Primary</button>
<button class="text secondary">Text - Secondary</button>
<button class="text success">Text - Success</button>
<button class="text danger">Text - Danger</button>
<button class="text dark">Text - Dark</button>

<button class="unelevated primary">Unelevated - Primary</button>
<button class="unelevated secondary">Unelevated - Secondary</button>
<button class="unelevated success">Unelevated - Success</button>
<button class="unelevated danger">Unelevated - Danger</button>
<button class="unelevated dark">Unelevated - Dark</button>

Normal button

Add the class .btn to the element.

<button class="btn">Click Me</button>

Unelevated button

Add the class .unelevated to the element.

<button class="btn unelevated">Click Me</button>

Text button

Add the class .text to the element.

<button class="btn text">Click Me</button>

Outlined button

Add the class .outlined to the element.

<button class="btn outlined">Click Me</button>

Add the class .btn to the a element.

<a class="btn" href="">Click Me</a>

Disabled button

Add the class .disabled to the element.

<button class="btn disabled">Click Me</button>


<button class="btn"><i class="material-icons">favorite</i>Click Me</button>
<button class="btn">Click Me&nbsp;&nbsp;<i class="material-icons">favorite</i></button>

Shaped button

Add the class shaped to the button.

<button class="btn shaped">Click Me</button>

Square button

Add the class square to the button.

<button class="btn square">Click Me</button>

Button colors

Color class Preview
Primary --
Secondary .secondary
Success .success
Danger .danger
Dark .dark
Warning .warning

Button sizes

Size class Preview
Normal --
Large .large
Small .small