Button - Midone - Tailwind HTML Admin Template

Basic Buttons

Show code

HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 border text-gray-700"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

Button Sizes

Show code

HTMLOpenTagdivHTMLCloseTag HTMLOpenTagbutton class="button button--sm w-24 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagSmallHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagMediumHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button button--lg w-24 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagLargeHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagbutton class="button button--sm w-24 mr-1 mb-2 border text-gray-700"HTMLCloseTagSmallHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 mr-1 mb-2 border text-gray-700"HTMLCloseTagMediumHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button button--lg w-24 mr-1 mb-2 border text-gray-700"HTMLCloseTagLargeHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Working with Links

Show code

Link Button Input Submit Reset Metal

HTMLOpenTaga href=""class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagLinkHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="button w-24 inline-block mr-1 mb-2 border text-gray-700"HTMLCloseTagButtonHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagInputHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagSubmitHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagResetHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="button w-24 inline-block mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagMetalHTMLOpenTag/aHTMLCloseTag

Elevated Buttons

Show code

HTMLOpenTagdivHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 text-gray-700"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 shadow-md mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-5"HTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 text-gray-700"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full shadow-md mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Social Media Buttons

Show code

HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-32 text-white"HTMLCloseTag HTMLOpenTagi data-feather="facebook"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Facebook HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-33 text-white"HTMLCloseTag HTMLOpenTagi data-feather="twitter"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Twitter HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-34 text-white"HTMLCloseTag HTMLOpenTagi data-feather="instagram"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Instagram HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-35 text-white"HTMLCloseTag HTMLOpenTagi data-feather="linkedin"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Linkedin HTMLOpenTag/buttonHTMLCloseTag

Outline Buttons

Show code

HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border border-theme-1 text-theme-1"HTMLCloseTagLinkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border text-gray-700"HTMLCloseTagButtonHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border border-theme-9 text-theme-9"HTMLCloseTagInputHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border border-theme-12 text-theme-12"HTMLCloseTagSubmitHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 border border-theme-6 text-theme-6"HTMLCloseTagResetHTMLOpenTag/buttonHTMLCloseTag

Loading State Buttons

Show code

HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white inline-flex items-center"HTMLCloseTag Saving HTMLOpenTagi data-loading-icon="oval"data-color="white"class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white inline-flex items-center"HTMLCloseTag Adding HTMLOpenTagi data-loading-icon="spinning-circles"data-color="white"class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white inline-flex items-center"HTMLCloseTag Loading HTMLOpenTagi data-loading-icon="three-dots"data-color="white"class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white inline-flex items-center"HTMLCloseTag Deleting HTMLOpenTagi data-loading-icon="puff"data-color="white"class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag

Rounded Buttons

Show code

HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 border text-gray-700"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

Soft Color Buttons

Show code

HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-14 text-theme-10"HTMLCloseTagPrimaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 border text-gray-700"HTMLCloseTagSecondaryHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-18 text-theme-9"HTMLCloseTagSuccessHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-17 text-theme-11"HTMLCloseTagWarningHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-theme-31 text-theme-6"HTMLCloseTagDangerHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-24 rounded-full mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagDarkHTMLOpenTag/buttonHTMLCloseTag

Icon Buttons

Show code

HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-1 text-white"HTMLCloseTag HTMLOpenTagi data-feather="activity"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Activity HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center border text-gray-700"HTMLCloseTag HTMLOpenTagi data-feather="hard-drive"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Hard Drive HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-9 text-white"HTMLCloseTag HTMLOpenTagi data-feather="calendar"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Calendar HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-12 text-white"HTMLCloseTag HTMLOpenTagi data-feather="share-2"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Share HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-6 text-white"HTMLCloseTag HTMLOpenTagi data-feather="trash"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Trash HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button w-32 mr-2 mb-2 flex items-center justify-center bg-gray-200 text-gray-600"HTMLCloseTag HTMLOpenTagi data-feather="image"class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Image HTMLOpenTag/buttonHTMLCloseTag

Icon Only Buttons

Show code

HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-theme-1 text-white"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="activity"class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 border text-gray-700"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="hard-drive"class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-theme-9 text-white"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="calendar"class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-theme-12 text-white"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="share-2"class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-theme-6 text-white"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="trash"class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="button px-2 mr-1 mb-2 bg-gray-200 text-gray-600"HTMLCloseTag HTMLOpenTagspan class="w-5 h-5 flex items-center justify-center"HTMLCloseTag HTMLOpenTagi data-feather="image"class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/spanHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag