MASTORSCDN BUTTON DOCUMENTATION

Welcome to the MastorsCDN Button Utility Classes documentation. These classes provide a versatile system for styling <button> elements with various colors, sizes, and states. Explore the sections below for previews, class names, and usage examples for solid buttons, outline buttons, navigation buttons, sizes, and additional features like links and disabled states.

Preview Class Name Description HTML Declaration Copy
Solid Button Styles
Apply these classes for solid-filled buttons with various thematic colors.
.btn.btn-primary Default primary button style. 
<button type="button" class="btn btn-primary">Primary</button>
.btn.btn-success Indicates a successful action. 
<button type="button" class="btn btn-success">Success</button>
.btn.btn-error Highlights an error state. 
<button type="button" class="btn btn-error">Error</button>
Outline Button Styles
Use these classes for outlined buttons with thematic border colors.
.btn.btn-outline-primary Primary outline button style. 
<button type="button" class="btn btn-outline-primary">Primary</button>
.btn.btn-outline-success Success outline button style. 
<button type="button" class="btn btn-outline-success">Success</button>
Navigation Button Styles
Apply these classes for navigation-themed buttons.
.btn.btn-nav-primary Primary navigation button style. 
<button type="button" class="btn btn-nav-primary">Primary</button>
.btn.btn-nav-dark Dark navigation button style. 
<button type="button" class="btn btn-nav-dark">Dark</button>
Button Sizes
Modify button sizes with these additional classes.
.btn.btn-xsm Extra small button size. 
<button type="button" class="btn btn-primary btn-xsm">XS</button>
.btn.btn-sm Small button size. 
<button type="button" class="btn btn-primary btn-sm">SM</button>
.btn.btn-lg Large button size. 
<button type="button" class="btn btn-primary btn-lg">LG</button>
.btn.btn-xlg Extra large button size. 
<button type="button" class="btn btn-primary btn-xlg">XL</button>
Link and Disabled Buttons
Special button styles for links and disabled states.
.btn.btn-link Styled as a link button. 
<button type="button" class="btn btn-link">Link</button>
.btn.btn-primary[disabled] Disabled solid button. 
<button type="button" class="btn btn-primary" disabled>Disabled</button>
.btn.btn-link[disabled] Disabled link button. 
<button type="button" class="btn btn-link" disabled>Disabled Link</button>