Buttons

Default Buttons


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

Default Buttons Pill


	<div class="btn-list">
		<button type="button" class="btn btn-primary rounded-pill">Primary</button>
		<button type="button" class="btn btn-primary rounded-pill btn-secondary">Secondary</button>
		<button type="button" class="btn btn-primary rounded-pill btn-success">Success</button>
		<button type="button" class="btn btn-primary rounded-pill btn-danger">Danger</button>
		<button type="button" class="btn btn-primary rounded-pill btn-warning">Warning</button>
		<button type="button" class="btn btn-primary rounded-pill btn-info">Info</button>
		<button type="button" class="btn btn-primary rounded-pill btn-light">Light</button>
		<button type="button" class="btn btn-primary rounded-pill btn-dark">Dark</button>
		<button type="button" class="btn btn-primary rounded-pill btn-link">Link</button>
	</div>

Buttons Outline


	<div class="btn-list">
		<button type="button" class="btn btn-primary btn-outline-primary">Primary</button>
		<button type="button" class="btn btn-primary btn-outline-secondary">Secondary</button>
		<button type="button" class="btn btn-primary btn-outline-success">Success</button>
		<button type="button" class="btn btn-primary btn-outline-danger">Danger</button>
		<button type="button" class="btn btn-primary btn-outline-warning">Warning</button>
		<button type="button" class="btn btn-primary btn-outline-info">Info</button>
		<button type="button" class="btn btn-primary btn-outline-light">Light</button>
		<button type="button" class="btn btn-primary btn-outline-dark">Dark</button>
	</div>

Buttons Outline Pill


	<div class="btn-list">
		<button type="button" class="btn btn-primary rounded-pill btn-outline-primary">Primary</button>
		<button type="button" class="btn btn-primary rounded-pill btn-outline-secondary">Secondary</button>
		<button type="button" class="btn btn-primary rounded-pill btn-outline-success">Success</button>
		<button type="button" class="btn btn-primary rounded-pill btn-outline-danger">Danger</button>
		<button type="button" class="btn btn-primary rounded-pill btn-outline-warning">Warning</button>
		<button type="button" class="btn btn-primary rounded-pill btn-outline-info">Info</button>
		<button type="button" class="btn btn-primary rounded-pill btn-outline-light">Light</button>
		<button type="button" class="btn btn-primary rounded-pill btn-outline-dark">Dark</button>
	</div>

Light Buttons


	<div class="btn-list">
		<button type="button" class="btn btn-primary btn-primary-transparent">Primary</button>
		<button type="button" class="btn btn-primary btn-secondary-transparent">Secondary</button>
		<button type="button" class="btn btn-primary btn-success-transparent">Success</button>
		<button type="button" class="btn btn-primary btn-danger-transparent">Danger</button>
		<button type="button" class="btn btn-primary btn-warning-transparent">Warning</button>
		<button type="button" class="btn btn-primary btn-info-transparent">Info</button>
		<button type="button" class="btn btn-primary btn-light-transparent">Light</button>
		<button type="button" class="btn btn-primary btn-dark-transparent">Dark</button>
		<button type="button" class="btn btn-primary btn-link-transparent">Link</button>
	</div>

Light Buttons Pill


	<div class="btn-list">
		<button type="button" class="btn btn-primary rounded-pill btn-primary-transparent">Primary</button>
		<button type="button" class="btn btn-primary rounded-pill btn-secondary-transparent">Secondary</button>
		<button type="button" class="btn btn-primary rounded-pill btn-success-transparent">Success</button>
		<button type="button" class="btn btn-primary rounded-pill btn-danger-transparent">Danger</button>
		<button type="button" class="btn btn-primary rounded-pill btn-warning-transparent">Warning</button>
		<button type="button" class="btn btn-primary rounded-pill btn-info-transparent">Info</button>
		<button type="button" class="btn btn-primary rounded-pill btn-light-transparent">Light</button>
		<button type="button" class="btn btn-primary rounded-pill btn-dark-transparent">Dark</button>
		<button type="button" class="btn btn-primary rounded-pill btn-link-transparent">Link</button>
	</div>

Button tags

Link 

<div class="btn-list">
	<a class="btn btn-primary" href="#" role="button">Link</a>
	<button class="btn btn-primary" type="submit">Button</button>
	<input class="btn btn-primary" type="button" value="Input">
	<input class="btn btn-primary" type="submit" value="Submit">
	<input class="btn btn-primary" type="reset" value="Reset">
</div>

Small buttons


	<div class="btn-list">
		<button type="button" class="btn btn-primary btn-sm">Small button</button>
		<button type="button" class="btn btn-primary btn-secondary btn-sm">Small button</button>
		<button type="button" class="btn btn-primary btn-success btn-sm">Small button</button>
		<button type="button" class="btn btn-primary btn-danger btn-sm">Small button</button>
		<button type="button" class="btn btn-primary btn-warning btn-sm">Small button</button>
		<button type="button" class="btn btn-primary btn-info btn-sm">Small button</button>
		<button type="button" class="btn btn-primary btn-light btn-sm">Small button</button>
		<button type="button" class="btn btn-primary btn-dark btn-sm">Small button</button>
		<button type="button" class="btn btn-primary btn-link btn-sm">Small button</button>
	</div>

Large buttons


	<div class="btn-list">
		<button type="button" class="btn btn-primary btn-lg">Large button</button>
		<button type="button" class="btn btn-primary btn-secondary btn-lg">Large button</button>
	</div>

Small buttons


	<button type="button" class="btn btn-primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
		Custom button
	</button>

Disabled State Buttons

Primary link Link 

	<div class="btn-list">
		<button type="button" class="btn btn-primary" disabled>Primary button</button>
		<button type="button" class="btn btn-primary btn-secondary" disabled>Button</button>
		<button type="button" class="btn btn-primary btn-outline-primary" disabled>Primary button</button>
		<button type="button" class="btn btn-primary btn-outline-secondary" disabled>Button</button>
		<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
		<a class="btn btn-primary btn-secondary disabled" role="button" aria-disabled="true">Link</a>
	</div>

Block Buttons


	<div class="d-grid gap-2">
		<button class="btn btn-primary" type="button">Button</button>
		<button class="btn btn-primary btn-success" type="button">Button</button>
	</div>

MD Block Buttons


	<div class="d-grid gap-2 d-md-block">
		<button class="btn btn-primary" type="button">Button</button>
		<button class="btn btn-primary" type="button">Button</button>
	</div>

MX Auto Buttons


	<div class="d-grid gap-2 col-6 mx-auto">
		<button class="btn btn-primary" type="button">Button</button>
		<button class="btn btn-primary" type="button">Button</button>
	</div>

Right Align


	<div class="d-grid gap-2 d-md-flex justify-content-md-end">
		<button class="btn btn-primary me-md-2" type="button">Button</button>
		<button class="btn btn-primary" type="button">Button</button>
	</div>

Align Center


	<div class="d-grid gap-2 d-md-flex justify-content-md-end">
		<button class="btn btn-primary me-md-2" type="button">Button</button>
		<button class="btn btn-primary" type="button">Button</button>
	</div>

Button Toggle states


	<p class="d-inline-flex gap-1">
		<button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
		<button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
		<button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
	</p>
	<p class="d-inline-flex gap-1">
		<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
		<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
		<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
	</p>

Link Toggle states

Toggle link Active toggle link Disabled toggle link

Toggle link Active toggle link Disabled toggle link 


	<p class="d-inline-flex gap-1">
		<a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
		<a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
		<a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
	</p>
	<p class="d-inline-flex gap-1">
		<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
		<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
		<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
	</p>

Button With Icon


	<div class="btn-list">
		<button type="button" class="btn btn-primary">
			<span>Primary</span>
			<i data-feather="user"></i>
		</button>
		<button type="button" class="btn btn-primary btn-secondary">
			<span>Secondary</span>
			<i data-feather="bell"></i>
		</button>
		<button type="button" class="btn btn-primary btn-success">
			<span>Success</span>
			<i data-feather="arrow-right"></i>
		</button>
		<button type="button" class="btn btn-primary btn-danger">
			<span>Danger</span>
			<i data-feather="plus"></i>
		</button>
		<button type="button" class="btn btn-primary btn-warning">
			<span>Warning</span>
			<i data-feather="alert-circle"></i>
		</button>
		<button type="button" class="btn btn-primary btn-info">
			<span>Info</span>
			<i data-feather="phone"></i>
		</button>
		<button type="button" class="btn btn-primary btn-light">
			<span>Light</span>
			<i data-feather="video"></i>
		</button>
		<button type="button" class="btn btn-primary btn-dark">
			<span>Dark</span>
			<i data-feather="twitter"></i>
		</button>
		<button type="button" class="btn btn-primary btn-link">
			<span>Link</span>
			<i data-feather="meh"></i>
		</button>
	</div>

Social Buttons


	<ul class="social-link ps-0 mb-0 list-unstyled btn-list">
		<li>
			<a href="https://www.google.com/" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Google">
				<i data-feather="mail"></i>
			</a>
		</li>
		<li>
			<a href="https://www.facebook.com/" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Facebook">
				<i data-feather="facebook"></i>
			</a>
		</li>
		<li>
			<a href="https://www.twitter.com/" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Twitter">
				<i data-feather="twitter"></i>
			</a>
		</li>
		<li>
			<a href="https://www.linkedin.com/" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Linkedin">
				<i data-feather="linkedin"></i>
			</a>
		</li>
		<li>
			<a href="https://www.instagram.com/" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Instagram">
				<i data-feather="instagram"></i>
			</a>
		</li>
		<li>
			<a href="https://www.youtube.com/" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Youtube">
				<i data-feather="youtube"></i>
			</a>
		</li>
		<li>
			<a href="https://www.slack.com/" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Slack">
				<i data-feather="slack"></i>
			</a>
		</li>
		<li>
			<a href="javascript:;" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Wishlist">
				<i data-feather="heart"></i>
			</a>
		</li>
		<li>
			<a href="javascript:;" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Star">
				<i data-feather="star"></i>
			</a>
		</li>
		<li>
			<a href="javascript:;" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bell">
				<i data-feather="bell"></i>
			</a>
		</li>
		<li>
			<a href="javascript:;" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="User">
				<i data-feather="user"></i>
			</a>
		</li>
		<li>
			<a href="javascript:;" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Call">
				<i data-feather="phone-call"></i>
			</a>
		</li>
	</ul>

Copyright © Dess Is Proudly Owned by Coder Deves

Theme System