Button - Rocketman - Tailwind HTML Admin Template

Buttons

Basic Buttons

Show example code

  HTMLOpenTagbutton class="btn btn-primary w-24 mr-1 mb-2"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-secondary w-24 mr-1 mb-2"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-success w-24 mr-1 mb-2"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-warning w-24 mr-1 mb-2"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-pending w-24 mr-1 mb-2"HTMLCloseTagPendingHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-danger w-24 mr-1 mb-2"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-dark w-24 mr-1 mb-2"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

Button Sizes

Show example code

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTagbutton class="btn btn-sm btn-primary w-24 mr-1 mb-2"HTMLCloseTagSmallHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-primary w-24 mr-1 mb-2"HTMLCloseTagMediumHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-lg btn-primary w-24 mr-1 mb-2"HTMLCloseTagLargeHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagbutton class="btn btn-sm btn-secondary w-24 mr-1 mb-2"HTMLCloseTagSmallHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-secondary w-24 mr-1 mb-2"HTMLCloseTagMediumHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-lg btn-secondary w-24 mr-1 mb-2"HTMLCloseTagLargeHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Working with Links

Show example code

Link Button Input Submit Pending Reset Metal

  HTMLOpenTaga href="" class="btn btn-primary w-24 inline-block mr-1 mb-2"HTMLCloseTagLinkHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="btn btn-secondary w-24 inline-block mr-1 mb-2"HTMLCloseTagButtonHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="btn btn-success w-24 inline-block mr-1 mb-2"HTMLCloseTagInputHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="btn btn-warning w-24 inline-block mr-1 mb-2"HTMLCloseTagSubmitHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="btn btn-pending w-24 inline-block mr-1 mb-2"HTMLCloseTagPendingHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="btn btn-danger w-24 inline-block mr-1 mb-2"HTMLCloseTagResetHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="btn btn-dark w-24 inline-block mr-1 mb-2"HTMLCloseTagMetalHTMLOpenTag/aHTMLCloseTag

Elevated Buttons

Show example code

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-primary w-24 mr-1 mb-2"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-secondary w-24 mr-1 mb-2"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-success w-24 mr-1 mb-2"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-warning w-24 mr-1 mb-2"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-pending w-24 mr-1 mb-2"HTMLCloseTagPendingHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-danger w-24 mr-1 mb-2"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-dark w-24 mr-1 mb-2"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-rounded-primary w-24 mr-1 mb-2"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-rounded-secondary w-24 mr-1 mb-2"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-rounded-success w-24 mr-1 mb-2"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-rounded-warning w-24 mr-1 mb-2"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-rounded-pending w-24 mr-1 mb-2"HTMLCloseTagPendingHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-rounded-danger w-24 mr-1 mb-2"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-elevated-rounded-dark w-24 mr-1 mb-2"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Social Media Buttons

Show example code

  HTMLOpenTagbutton class="btn btn-facebook w-32 mr-2 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="facebook" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Facebook HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-twitter w-32 mr-2 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="twitter" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Twitter HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-instagram w-32 mr-2 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="instagram" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Instagram HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-linkedin w-32 mr-2 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="linkedin" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Linkedin HTMLOpenTag/buttonHTMLCloseTag

Outline Buttons

Show example code

  HTMLOpenTagbutton class="btn btn-outline-primary w-24 inline-block mr-1 mb-2"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-outline-secondary w-24 inline-block mr-1 mb-2"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-outline-success w-24 inline-block mr-1 mb-2"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-outline-warning w-24 inline-block mr-1 mb-2"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-outline-pending w-24 inline-block mr-1 mb-2"HTMLCloseTagPendingHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-outline-danger w-24 inline-block mr-1 mb-2"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-outline-dark w-24 inline-block mr-1 mb-2"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

Loading State Buttons

Show example code

  HTMLOpenTagbutton class="btn btn-primary mr-1 mb-2"HTMLCloseTag Saving HTMLOpenTagi data-loading-icon="oval" data-color="white" class="w-4 h-4 ml-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-success mr-1 mb-2"HTMLCloseTag Adding HTMLOpenTagi data-loading-icon="spinning-circles" data-color="white" class="w-4 h-4 ml-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-warning mr-1 mb-2"HTMLCloseTag Loading HTMLOpenTagi data-loading-icon="three-dots" data-color="1a202c" class="w-4 h-4 ml-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-danger mr-1 mb-2"HTMLCloseTag Deleting HTMLOpenTagi data-loading-icon="puff" data-color="white" class="w-4 h-4 ml-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag

Rounded Buttons

Show example code

  HTMLOpenTagbutton class="btn btn-rounded-primary w-24 mr-1 mb-2"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-rounded-secondary w-24 mr-1 mb-2"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-rounded-success w-24 mr-1 mb-2"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-rounded-warning w-24 mr-1 mb-2"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-rounded-pending w-24 mr-1 mb-2"HTMLCloseTagPendingHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-rounded-danger w-24 mr-1 mb-2"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-rounded-dark w-24 mr-1 mb-2"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

Soft Color Buttons

Show example code

  HTMLOpenTagbutton class="btn btn-rounded btn-primary-soft w-24 mr-1 mb-2"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-rounded btn-secondary-soft w-24 mr-1 mb-2"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-rounded btn-success-soft w-24 mr-1 mb-2"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-rounded btn-warning-soft w-24 mr-1 mb-2"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-rounded btn-pending-soft w-24 mr-1 mb-2"HTMLCloseTagPendingHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-rounded btn-danger-soft w-24 mr-1 mb-2"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-rounded btn-dark-soft w-24 mr-1 mb-2"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

Icon Buttons

Show example code

  HTMLOpenTagbutton class="btn btn-primary w-32 mr-2 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="activity" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Activity HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-secondary w-32 mr-2 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="hard-drive" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Hard Drive HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-success w-32 mr-2 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="calendar" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Calendar HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-warning w-32 mr-2 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="share-2" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Share HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-pending w-32 mr-2 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="download" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Pending HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-danger w-32 mr-2 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="trash" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Trash HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-dark w-32 mr-2 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="image" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Image HTMLOpenTag/buttonHTMLCloseTag

Icon Only Buttons

Show example code

  HTMLOpenTagbutton class="btn btn-primary mr-1 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="activity" class="w-5 h-5"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-secondary mr-1 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="hard-drive" class="w-5 h-5"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-success mr-1 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="calendar" class="w-5 h-5"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-warning mr-1 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="share-2" class="w-5 h-5"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-pending mr-1 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="download" class="w-5 h-5"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-danger mr-1 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="trash" class="w-5 h-5"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-dark mr-1 mb-2"HTMLCloseTag HTMLOpenTagi data-lucide="image" class="w-5 h-5"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag

Dark Mode