Website Blocks

<button type="button" data-ppt-btn class="btn-primary">Primary</button>
<button type="button" data-ppt-btn class="btn-secondary">Secondary</button>
<button type="button" data-ppt-btn class="btn-success">Success</button>
<button type="button" data-ppt-btn class="btn-danger">Danger</button>
<button type="button" data-ppt-btn class="btn-system">System</button>
<button type="button" data-ppt-btn class="btn-light">Light</button>
<button type="button" data-ppt-btn class="btn-dark">Dark</button>
<button type="button" data-ppt-btn class="btn-orange">Orange</button>
<hr>
<a href="#" data-ppt-btn class="btn-primary">Primary</a><a href="#" data-ppt-btn class="btn-secondary">Secondary</a><a href="#" data-ppt-btn class="btn-success">Success</a><a href="#" data-ppt-btn class="btn-danger">Danger</a><a href="#" data-ppt-btn class="btn-system">System</a><a href="#" data-ppt-btn class="btn-light">Light</a><a href="#" data-ppt-btn class="btn-dark">Dark</a><a href="#" data-ppt-btn class="btn-orange">Orange</a>

<a href="#" data-ppt-btn class="btn-xs btn-primary">Primary</a><a href="#" data-ppt-btn class="btn-xs btn-secondary">Secondary</a><a href="#" data-ppt-btn class="btn-xs btn-success">Success</a><a href="#" data-ppt-btn class="btn-xs btn-danger">Danger</a><a href="#" data-ppt-btn class="btn-xs btn-system">System</a><a href="#" data-ppt-btn class="btn-xs btn-light">Light</a><a href="#" data-ppt-btn class="btn-xs btn-dark">Dark</a><a href="#" data-ppt-btn class="btn-xs btn-orange">Orange</a>

	<div ppt-flex-between>
	<div class="w-100"><a href="#" data-ppt-btn class="btn-block btn-lg list btn-primary">Primary</a><a href="#" data-ppt-btn class="btn-block btn-lg list btn-secondary">Secondary</a><a href="#" data-ppt-btn class="btn-block btn-lg list btn-success">Success</a><a href="#" data-ppt-btn class="btn-block btn-lg list btn-danger">Danger</a><a href="#" data-ppt-btn class="btn-block btn-lg list btn-system">System</a><a href="#" data-ppt-btn class="btn-block btn-lg list btn-light">Light</a><a href="#" data-ppt-btn class="btn-block btn-lg list btn-dark">Dark</a><a href="#" data-ppt-btn class="btn-block btn-lg list btn-orange">Orange</a></div>

	<div class="mx-3"></div>

	<div class="w-100"><button type="button" data-ppt-btn class="btn-block btn-lg list btn-primary">Primary</button>
<button type="button" data-ppt-btn class="btn-block btn-lg list btn-secondary">Secondary</button>
<button type="button" data-ppt-btn class="btn-block btn-lg list btn-success">Success</button>
<button type="button" data-ppt-btn class="btn-block btn-lg list btn-danger">Danger</button>
<button type="button" data-ppt-btn class="btn-block btn-lg list btn-system">System</button>
<button type="button" data-ppt-btn class="btn-block btn-lg list btn-light">Light</button>
<button type="button" data-ppt-btn class="btn-block btn-lg list btn-dark">Dark</button>
<button type="button" data-ppt-btn class="btn-block btn-lg list btn-orange">Orange</button>
</div>
</div>

<button type="button" class="btn-system small" data-ppt-btn>Extra Small</button>
<button type="button" class="btn-system " data-ppt-btn>Normal</button>
<button type="button" class="btn-system btn-lg" data-ppt-btn>Large</button>
<button type="button" class="btn-system btn-xl" data-ppt-btn>Extra Large</button>
<hr />
<button type="button" class="btn-system btn-sm rounded-pill" data-ppt-btn>Extra Small</button>
<button type="button" class="btn-system rounded-pill" data-ppt-btn>Normal</button>
<button type="button" class="btn-system btn-lg rounded-pill" data-ppt-btn>Large</button>
<button type="button" class="btn-system btn-xl rounded-pill" data-ppt-btn>Extra Large</button>

<a href="#" data-ppt-btn class="rounded btn-primary">Primary</a><a href="#" data-ppt-btn class="rounded btn-secondary">Secondary</a><a href="#" data-ppt-btn class="rounded btn-success">Success</a><a href="#" data-ppt-btn class="rounded btn-danger">Danger</a><a href="#" data-ppt-btn class="rounded btn-system">System</a><a href="#" data-ppt-btn class="rounded btn-light">Light</a><a href="#" data-ppt-btn class="rounded btn-dark">Dark</a><a href="#" data-ppt-btn class="rounded btn-orange">Orange</a>

<a href="#" data-ppt-btn class="rounded-pill btn-primary">Primary</a><a href="#" data-ppt-btn class="rounded-pill btn-secondary">Secondary</a><a href="#" data-ppt-btn class="rounded-pill btn-success">Success</a><a href="#" data-ppt-btn class="rounded-pill btn-danger">Danger</a><a href="#" data-ppt-btn class="rounded-pill btn-system">System</a><a href="#" data-ppt-btn class="rounded-pill btn-light">Light</a><a href="#" data-ppt-btn class="rounded-pill btn-dark">Dark</a><a href="#" data-ppt-btn class="rounded-pill btn-orange">Orange</a>

<a href="#" data-ppt-btn class="shadow btn-primary">Primary</a><a href="#" data-ppt-btn class="shadow btn-secondary">Secondary</a><a href="#" data-ppt-btn class="shadow btn-success">Success</a><a href="#" data-ppt-btn class="shadow btn-danger">Danger</a><a href="#" data-ppt-btn class="shadow btn-system">System</a><a href="#" data-ppt-btn class="shadow btn-light">Light</a><a href="#" data-ppt-btn class="shadow btn-dark">Dark</a><a href="#" data-ppt-btn class="shadow btn-orange">Orange</a><hr>
<a href="#" data-ppt-btn class="shadow-sm btn-primary">Primary</a><a href="#" data-ppt-btn class="shadow-sm btn-secondary">Secondary</a><a href="#" data-ppt-btn class="shadow-sm btn-success">Success</a><a href="#" data-ppt-btn class="shadow-sm btn-danger">Danger</a><a href="#" data-ppt-btn class="shadow-sm btn-system">System</a><a href="#" data-ppt-btn class="shadow-sm btn-light">Light</a><a href="#" data-ppt-btn class="shadow-sm btn-dark">Dark</a><a href="#" data-ppt-btn class="shadow-sm btn-orange">Orange</a><hr>
<a href="#" data-ppt-btn class="shadow-lg btn-primary">Primary</a><a href="#" data-ppt-btn class="shadow-lg btn-secondary">Secondary</a><a href="#" data-ppt-btn class="shadow-lg btn-success">Success</a><a href="#" data-ppt-btn class="shadow-lg btn-danger">Danger</a><a href="#" data-ppt-btn class="shadow-lg btn-system">System</a><a href="#" data-ppt-btn class="shadow-lg btn-light">Light</a><a href="#" data-ppt-btn class="shadow-lg btn-dark">Dark</a><a href="#" data-ppt-btn class="shadow-lg btn-orange">Orange</a>

<a href="#" data-ppt-btn class="btn-primary"><i class="fa fa-cog"></i><span>Primary</span>
</a><a href="#" data-ppt-btn class="btn-secondary"><i class="fa fa-cog"></i><span>Secondary</span>
</a><a href="#" data-ppt-btn class="btn-success"><i class="fa fa-cog"></i><span>Success</span>
</a><a href="#" data-ppt-btn class="btn-danger"><i class="fa fa-cog"></i><span>Danger</span>
</a><a href="#" data-ppt-btn class="btn-system"><i class="fa fa-cog"></i><span>System</span>
</a><a href="#" data-ppt-btn class="btn-light"><i class="fa fa-cog"></i><span>Light</span>
</a><a href="#" data-ppt-btn class="btn-dark"><i class="fa fa-cog"></i><span>Dark</span>
</a><a href="#" data-ppt-btn class="btn-orange"><i class="fa fa-cog"></i><span>Orange</span>
</a>

<a href="javascript:void(0)" data-ppt-btn class="btn-sm btn-primary btn-icon icon-before"><i class="fa fa-cog"></i>
	<span ppt-flex-middle>small</span>
</a><a href="javascript:void(0)" data-ppt-btn class="btn-primary btn-icon icon-before"><i class="fa fa-cog"></i>
	<span ppt-flex-middle>default</span>
</a><a href="javascript:void(0)" data-ppt-btn class="btn-lg btn-primary btn-icon icon-before"><i class="fa fa-cog"></i>
	<span ppt-flex-middle>large</span>
</a>

<a href="javascript:void(0)" data-ppt-btn class="btn-sm btn-primary btn-icon icon-after"><span>small</span>

	<span class="icon-svg" data-ppt-icon-size="24"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /></svg></span>
</a><a href="javascript:void(0)" data-ppt-btn class="btn-primary btn-icon icon-after"><span>small</span>

	<span class="icon-svg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /></svg></span>
</a><a href="javascript:void(0)" data-ppt-btn class="btn-lg btn-primary btn-icon icon-after"><span>small</span>

	<span class="icon-svg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /></svg></span>
</a><hr />
<a href="javascript:void(0)" data-ppt-btn class="btn-sm btn-primary btn-icon icon-before">
	<span class="icon-svg" data-ppt-icon-size="24"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /></svg></span>
<span>small</span>
</a><a href="javascript:void(0)" data-ppt-btn class="btn-primary btn-icon icon-before">
	<span class="icon-svg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /></svg></span>
<span>small</span>
</a><a href="javascript:void(0)" data-ppt-btn class="btn-lg btn-primary btn-icon icon-before">
	<span class="icon-svg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /></svg></span>
<span>small</span>
</a>

<a href="javascript:void(0)" data-ppt-btn class="btn-sm btn-primary btn-icon icon-after"><span>small</span>
<i class="fa fa-cog"></i></a><a href="javascript:void(0)" data-ppt-btn class="btn-primary btn-icon icon-after"><span>default</span>
<i class="fa fa-cog"></i></a><a href="javascript:void(0)" data-ppt-btn class="btn-lg btn-primary btn-icon icon-after">
	<span   ppt-flex-between><span>large</span>
<i class="fa fa-cog"></i></span>
</a>

<a href="javascript:void(0)" data-ppt-btn class="btn-sm btn-secondary btn-icon icon-before"><i class="fa fa-user-circle"></i><span> Member Login</span>
</a><a href="javascript:void(0)" data-ppt-btn class=" btn-sm btn-primary btn-icon icon-after"><span>Search Website</span>
<i class="fas fa-long-arrow-alt-right"></i></a><hr />
<a href="javascript:void(0)" data-ppt-btn class="btn btn-secondary btn-icon icon-before"><i class="fa fa-user-circle"></i><span> Member Login</span>
</a><a href="javascript:void(0)" data-ppt-btn class=" btn btn-primary btn-icon icon-after"><span>Search Website</span>
<i class="fas fa-long-arrow-alt-right"></i></a><hr />
<a href="javascript:void(0)" data-ppt-btn class="btn-lg btn-secondary btn-icon icon-before"><i class="fa fa-user-circle"></i><span> Member Login</span>
</a><a href="javascript:void(0)" data-ppt-btn class=" btn-lg btn-primary btn-icon icon-after"><span>Search Website</span>
<i class="fas fa-long-arrow-alt-right"></i></a><hr />
<a href="javascript:void(0)" data-ppt-btn class="btn-xl btn-secondary btn-icon icon-before"><i class="fa fa-user-circle"></i><span> Member Login</span>
</a><a href="javascript:void(0)" data-ppt-btn class=" btn-xl btn-primary btn-icon icon-after"><span>Search Website</span>
<i class="fas fa-long-arrow-alt-right"></i></a>

<a href="javascript:void(0)" data-ppt-btn class="btn-primary mr-4 btn-num">
	<span class="num bg-secondary text-light">12</span>
<span> Member Login</span>
</a><a href="javascript:void(0)" data-ppt-btn class="btn-system btn-num">
	<span class="num btn-primary text-light">12</span>
<span> Member Login</span>
</a>