buttons.css

harun.bspt2014@gmail.com

I’ll build this as a production-ready buttons.css for RX Theme: CSS variables first, many button variants, sizes, states, accessibility, icons, loading, groups, responsive rules, and dark/high-contrast support.

Dear friend, paste this full code into:

assets/static/static-css/components/buttons.css

/*!
Theme Name: RX Theme
File: assets/static/static-css/components/buttons.css
Description: Advanced button component system for RX Theme.
Author: RxHarun
Version: 1.0.0
*/

/* =========================================================
   RX THEME BUTTON COMPONENT
   ---------------------------------------------------------
   Includes:
   - Base button system
   - Primary / secondary / accent / medical / danger / success
   - Outline, ghost, soft, link, icon buttons
   - Sizes, shapes, full width
   - Loading state
   - Button groups
   - Floating buttons
   - Accessibility states
   - Dark mode
   - High contrast mode
   - Reduced motion
   ========================================================= */


/* =========================================================
   1. BUTTON DESIGN TOKENS
   ========================================================= */

:root {
  /* Core button font */
  --rx-btn-font-family: var(--rx-font-primary, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --rx-btn-font-weight: 600;
  --rx-btn-line-height: 1.2;
  --rx-btn-letter-spacing: 0.01em;

  /* Button radius */
  --rx-btn-radius-xs: 0.25rem;
  --rx-btn-radius-sm: 0.375rem;
  --rx-btn-radius-md: 0.5rem;
  --rx-btn-radius-lg: 0.75rem;
  --rx-btn-radius-xl: 1rem;
  --rx-btn-radius-pill: 999px;
  --rx-btn-radius: var(--rx-btn-radius-md);

  /* Button spacing */
  --rx-btn-gap: 0.5rem;
  --rx-btn-border-width: 1px;

  /* Button heights */
  --rx-btn-height-xs: 1.875rem;
  --rx-btn-height-sm: 2.25rem;
  --rx-btn-height-md: 2.75rem;
  --rx-btn-height-lg: 3.25rem;
  --rx-btn-height-xl: 3.75rem;

  /* Button padding */
  --rx-btn-padding-x-xs: 0.625rem;
  --rx-btn-padding-x-sm: 0.875rem;
  --rx-btn-padding-x-md: 1.125rem;
  --rx-btn-padding-x-lg: 1.5rem;
  --rx-btn-padding-x-xl: 1.875rem;

  /* Button font sizes */
  --rx-btn-font-size-xs: 0.75rem;
  --rx-btn-font-size-sm: 0.8125rem;
  --rx-btn-font-size-md: 0.9375rem;
  --rx-btn-font-size-lg: 1rem;
  --rx-btn-font-size-xl: 1.125rem;

  /* Brand colors */
  --rx-btn-primary-bg: var(--rx-color-primary, #0b63ce);
  --rx-btn-primary-bg-hover: var(--rx-color-primary-hover, #084fa6);
  --rx-btn-primary-bg-active: var(--rx-color-primary-active, #063f86);
  --rx-btn-primary-text: #ffffff;
  --rx-btn-primary-border: var(--rx-btn-primary-bg);

  --rx-btn-secondary-bg: var(--rx-color-secondary, #334155);
  --rx-btn-secondary-bg-hover: #1e293b;
  --rx-btn-secondary-bg-active: #0f172a;
  --rx-btn-secondary-text: #ffffff;
  --rx-btn-secondary-border: var(--rx-btn-secondary-bg);

  --rx-btn-accent-bg: var(--rx-color-accent, #7c3aed);
  --rx-btn-accent-bg-hover: #6d28d9;
  --rx-btn-accent-bg-active: #5b21b6;
  --rx-btn-accent-text: #ffffff;
  --rx-btn-accent-border: var(--rx-btn-accent-bg);

  /* Medical colors */
  --rx-btn-medical-bg: var(--rx-color-medical, #00897b);
  --rx-btn-medical-bg-hover: #00796b;
  --rx-btn-medical-bg-active: #00695c;
  --rx-btn-medical-text: #ffffff;
  --rx-btn-medical-border: var(--rx-btn-medical-bg);

  --rx-btn-success-bg: var(--rx-color-success, #16a34a);
  --rx-btn-success-bg-hover: #15803d;
  --rx-btn-success-bg-active: #166534;
  --rx-btn-success-text: #ffffff;
  --rx-btn-success-border: var(--rx-btn-success-bg);

  --rx-btn-warning-bg: var(--rx-color-warning, #f59e0b);
  --rx-btn-warning-bg-hover: #d97706;
  --rx-btn-warning-bg-active: #b45309;
  --rx-btn-warning-text: #111827;
  --rx-btn-warning-border: var(--rx-btn-warning-bg);

  --rx-btn-danger-bg: var(--rx-color-danger, #dc2626);
  --rx-btn-danger-bg-hover: #b91c1c;
  --rx-btn-danger-bg-active: #991b1b;
  --rx-btn-danger-text: #ffffff;
  --rx-btn-danger-border: var(--rx-btn-danger-bg);

  --rx-btn-info-bg: var(--rx-color-info, #0284c7);
  --rx-btn-info-bg-hover: #0369a1;
  --rx-btn-info-bg-active: #075985;
  --rx-btn-info-text: #ffffff;
  --rx-btn-info-border: var(--rx-btn-info-bg);

  /* Neutral colors */
  --rx-btn-light-bg: #f8fafc;
  --rx-btn-light-bg-hover: #f1f5f9;
  --rx-btn-light-bg-active: #e2e8f0;
  --rx-btn-light-text: #0f172a;
  --rx-btn-light-border: #cbd5e1;

  --rx-btn-dark-bg: #0f172a;
  --rx-btn-dark-bg-hover: #1e293b;
  --rx-btn-dark-bg-active: #334155;
  --rx-btn-dark-text: #ffffff;
  --rx-btn-dark-border: #0f172a;

  /* Surface button */
  --rx-btn-surface-bg: var(--rx-surface, #ffffff);
  --rx-btn-surface-bg-hover: #f8fafc;
  --rx-btn-surface-bg-active: #f1f5f9;
  --rx-btn-surface-text: var(--rx-text, #111827);
  --rx-btn-surface-border: var(--rx-border, #d1d5db);

  /* Shadow */
  --rx-btn-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);
  --rx-btn-shadow-md: 0 4px 10px rgb(15 23 42 / 0.12);
  --rx-btn-shadow-lg: 0 10px 25px rgb(15 23 42 / 0.18);

  /* Focus */
  --rx-btn-focus-ring-color: rgb(11 99 206 / 0.35);
  --rx-btn-focus-ring-width: 3px;
  --rx-btn-focus-ring-offset: 2px;

  /* Disabled */
  --rx-btn-disabled-opacity: 0.55;
  --rx-btn-disabled-cursor: not-allowed;

  /* Motion */
  --rx-btn-transition-duration: 180ms;
  --rx-btn-transition-easing: cubic-bezier(0.2, 0, 0.2, 1);
}


/* =========================================================
   2. BASE BUTTON
   ========================================================= */

.rx-btn,
button.rx-btn,
input[type="button"].rx-btn,
input[type="submit"].rx-btn,
input[type="reset"].rx-btn,
.wp-block-button__link.rx-btn {
  --rx-btn-bg: var(--rx-btn-primary-bg);
  --rx-btn-bg-hover: var(--rx-btn-primary-bg-hover);
  --rx-btn-bg-active: var(--rx-btn-primary-bg-active);
  --rx-btn-text: var(--rx-btn-primary-text);
  --rx-btn-border: var(--rx-btn-primary-border);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rx-btn-gap);
  min-height: var(--rx-btn-height-md);
  padding-block: 0;
  padding-inline: var(--rx-btn-padding-x-md);
  border: var(--rx-btn-border-width) solid var(--rx-btn-border);
  border-radius: var(--rx-btn-radius);
  background: var(--rx-btn-bg);
  color: var(--rx-btn-text);
  font-family: var(--rx-btn-font-family);
  font-size: var(--rx-btn-font-size-md);
  font-weight: var(--rx-btn-font-weight);
  line-height: var(--rx-btn-line-height);
  letter-spacing: var(--rx-btn-letter-spacing);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  box-shadow: var(--rx-btn-shadow-sm);
  transform: translateY(0);
  transition:
    background-color var(--rx-btn-transition-duration) var(--rx-btn-transition-easing),
    border-color var(--rx-btn-transition-duration) var(--rx-btn-transition-easing),
    color var(--rx-btn-transition-duration) var(--rx-btn-transition-easing),
    box-shadow var(--rx-btn-transition-duration) var(--rx-btn-transition-easing),
    transform var(--rx-btn-transition-duration) var(--rx-btn-transition-easing),
    opacity var(--rx-btn-transition-duration) var(--rx-btn-transition-easing);
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.rx-btn:hover {
  background: var(--rx-btn-bg-hover);
  border-color: var(--rx-btn-bg-hover);
  color: var(--rx-btn-text);
  text-decoration: none;
  box-shadow: var(--rx-btn-shadow-md);
  transform: translateY(-1px);
}

.rx-btn:active {
  background: var(--rx-btn-bg-active);
  border-color: var(--rx-btn-bg-active);
  box-shadow: var(--rx-btn-shadow-sm);
  transform: translateY(0);
}

.rx-btn:focus {
  outline: none;
}

.rx-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--rx-btn-focus-ring-offset) var(--rx-surface, #ffffff),
    0 0 0 calc(var(--rx-btn-focus-ring-offset) + var(--rx-btn-focus-ring-width)) var(--rx-btn-focus-ring-color);
}

.rx-btn[disabled],
.rx-btn:disabled,
.rx-btn.is-disabled,
.rx-btn[aria-disabled="true"] {
  opacity: var(--rx-btn-disabled-opacity);
  cursor: var(--rx-btn-disabled-cursor);
  pointer-events: none;
  box-shadow: none;
  transform: none;
}


/* =========================================================
   3. BUTTON COLOR VARIANTS
   ========================================================= */

.rx-btn-primary {
  --rx-btn-bg: var(--rx-btn-primary-bg);
  --rx-btn-bg-hover: var(--rx-btn-primary-bg-hover);
  --rx-btn-bg-active: var(--rx-btn-primary-bg-active);
  --rx-btn-text: var(--rx-btn-primary-text);
  --rx-btn-border: var(--rx-btn-primary-border);
  --rx-btn-focus-ring-color: rgb(11 99 206 / 0.35);
}

.rx-btn-secondary {
  --rx-btn-bg: var(--rx-btn-secondary-bg);
  --rx-btn-bg-hover: var(--rx-btn-secondary-bg-hover);
  --rx-btn-bg-active: var(--rx-btn-secondary-bg-active);
  --rx-btn-text: var(--rx-btn-secondary-text);
  --rx-btn-border: var(--rx-btn-secondary-border);
  --rx-btn-focus-ring-color: rgb(51 65 85 / 0.35);
}

.rx-btn-accent {
  --rx-btn-bg: var(--rx-btn-accent-bg);
  --rx-btn-bg-hover: var(--rx-btn-accent-bg-hover);
  --rx-btn-bg-active: var(--rx-btn-accent-bg-active);
  --rx-btn-text: var(--rx-btn-accent-text);
  --rx-btn-border: var(--rx-btn-accent-border);
  --rx-btn-focus-ring-color: rgb(124 58 237 / 0.35);
}

.rx-btn-medical {
  --rx-btn-bg: var(--rx-btn-medical-bg);
  --rx-btn-bg-hover: var(--rx-btn-medical-bg-hover);
  --rx-btn-bg-active: var(--rx-btn-medical-bg-active);
  --rx-btn-text: var(--rx-btn-medical-text);
  --rx-btn-border: var(--rx-btn-medical-border);
  --rx-btn-focus-ring-color: rgb(0 137 123 / 0.35);
}

.rx-btn-success {
  --rx-btn-bg: var(--rx-btn-success-bg);
  --rx-btn-bg-hover: var(--rx-btn-success-bg-hover);
  --rx-btn-bg-active: var(--rx-btn-success-bg-active);
  --rx-btn-text: var(--rx-btn-success-text);
  --rx-btn-border: var(--rx-btn-success-border);
  --rx-btn-focus-ring-color: rgb(22 163 74 / 0.35);
}

.rx-btn-warning {
  --rx-btn-bg: var(--rx-btn-warning-bg);
  --rx-btn-bg-hover: var(--rx-btn-warning-bg-hover);
  --rx-btn-bg-active: var(--rx-btn-warning-bg-active);
  --rx-btn-text: var(--rx-btn-warning-text);
  --rx-btn-border: var(--rx-btn-warning-border);
  --rx-btn-focus-ring-color: rgb(245 158 11 / 0.35);
}

.rx-btn-danger {
  --rx-btn-bg: var(--rx-btn-danger-bg);
  --rx-btn-bg-hover: var(--rx-btn-danger-bg-hover);
  --rx-btn-bg-active: var(--rx-btn-danger-bg-active);
  --rx-btn-text: var(--rx-btn-danger-text);
  --rx-btn-border: var(--rx-btn-danger-border);
  --rx-btn-focus-ring-color: rgb(220 38 38 / 0.35);
}

.rx-btn-info {
  --rx-btn-bg: var(--rx-btn-info-bg);
  --rx-btn-bg-hover: var(--rx-btn-info-bg-hover);
  --rx-btn-bg-active: var(--rx-btn-info-bg-active);
  --rx-btn-text: var(--rx-btn-info-text);
  --rx-btn-border: var(--rx-btn-info-border);
  --rx-btn-focus-ring-color: rgb(2 132 199 / 0.35);
}

.rx-btn-light {
  --rx-btn-bg: var(--rx-btn-light-bg);
  --rx-btn-bg-hover: var(--rx-btn-light-bg-hover);
  --rx-btn-bg-active: var(--rx-btn-light-bg-active);
  --rx-btn-text: var(--rx-btn-light-text);
  --rx-btn-border: var(--rx-btn-light-border);
  --rx-btn-focus-ring-color: rgb(100 116 139 / 0.25);
}

.rx-btn-dark {
  --rx-btn-bg: var(--rx-btn-dark-bg);
  --rx-btn-bg-hover: var(--rx-btn-dark-bg-hover);
  --rx-btn-bg-active: var(--rx-btn-dark-bg-active);
  --rx-btn-text: var(--rx-btn-dark-text);
  --rx-btn-border: var(--rx-btn-dark-border);
  --rx-btn-focus-ring-color: rgb(15 23 42 / 0.35);
}

.rx-btn-surface {
  --rx-btn-bg: var(--rx-btn-surface-bg);
  --rx-btn-bg-hover: var(--rx-btn-surface-bg-hover);
  --rx-btn-bg-active: var(--rx-btn-surface-bg-active);
  --rx-btn-text: var(--rx-btn-surface-text);
  --rx-btn-border: var(--rx-btn-surface-border);
  --rx-btn-focus-ring-color: rgb(100 116 139 / 0.25);
}


/* =========================================================
   4. OUTLINE BUTTONS
   ========================================================= */

.rx-btn-outline {
  background: transparent;
  color: var(--rx-btn-bg);
  border-color: var(--rx-btn-bg);
  box-shadow: none;
}

.rx-btn-outline:hover {
  background: var(--rx-btn-bg);
  color: var(--rx-btn-text);
  border-color: var(--rx-btn-bg);
}

.rx-btn-outline:active {
  background: var(--rx-btn-bg-active);
  color: var(--rx-btn-text);
  border-color: var(--rx-btn-bg-active);
}

.rx-btn-outline.rx-btn-light {
  color: var(--rx-btn-light-text);
  border-color: var(--rx-btn-light-border);
}

.rx-btn-outline.rx-btn-light:hover {
  background: var(--rx-btn-light-bg-hover);
  color: var(--rx-btn-light-text);
}


/* =========================================================
   5. GHOST BUTTONS
   ========================================================= */

.rx-btn-ghost {
  background: transparent;
  color: var(--rx-btn-bg);
  border-color: transparent;
  box-shadow: none;
}

.rx-btn-ghost:hover {
  background: color-mix(in srgb, var(--rx-btn-bg) 10%, transparent);
  color: var(--rx-btn-bg-hover);
  border-color: transparent;
  box-shadow: none;
}

.rx-btn-ghost:active {
  background: color-mix(in srgb, var(--rx-btn-bg) 16%, transparent);
  color: var(--rx-btn-bg-active);
}


/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
  .rx-btn-ghost:hover {
    background: rgb(15 23 42 / 0.06);
  }

  .rx-btn-ghost:active {
    background: rgb(15 23 42 / 0.1);
  }
}


/* =========================================================
   6. SOFT BUTTONS
   ========================================================= */

.rx-btn-soft {
  background: color-mix(in srgb, var(--rx-btn-bg) 12%, #ffffff);
  color: var(--rx-btn-bg-active);
  border-color: color-mix(in srgb, var(--rx-btn-bg) 18%, #ffffff);
  box-shadow: none;
}

.rx-btn-soft:hover {
  background: color-mix(in srgb, var(--rx-btn-bg) 18%, #ffffff);
  color: var(--rx-btn-bg-active);
  border-color: color-mix(in srgb, var(--rx-btn-bg) 24%, #ffffff);
  box-shadow: var(--rx-btn-shadow-sm);
}

.rx-btn-soft:active {
  background: color-mix(in srgb, var(--rx-btn-bg) 24%, #ffffff);
}

@supports not (background: color-mix(in srgb, #000 10%, #fff)) {
  .rx-btn-soft {
    background: #eef6ff;
    color: #084fa6;
    border-color: #bfdbfe;
  }
}


/* =========================================================
   7. LINK BUTTONS
   ========================================================= */

.rx-btn-link {
  min-height: auto;
  padding: 0;
  background: transparent;
  color: var(--rx-btn-bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

.rx-btn-link:hover {
  background: transparent;
  color: var(--rx-btn-bg-hover);
  box-shadow: none;
  transform: none;
  text-decoration-thickness: 0.12em;
}

.rx-btn-link:active {
  color: var(--rx-btn-bg-active);
}

.rx-btn-link:focus-visible {
  border-radius: 0.2rem;
}


/* =========================================================
   8. BUTTON SIZES
   ========================================================= */

.rx-btn-xs {
  min-height: var(--rx-btn-height-xs);
  padding-inline: var(--rx-btn-padding-x-xs);
  font-size: var(--rx-btn-font-size-xs);
  gap: 0.375rem;
}

.rx-btn-sm {
  min-height: var(--rx-btn-height-sm);
  padding-inline: var(--rx-btn-padding-x-sm);
  font-size: var(--rx-btn-font-size-sm);
  gap: 0.4375rem;
}

.rx-btn-md {
  min-height: var(--rx-btn-height-md);
  padding-inline: var(--rx-btn-padding-x-md);
  font-size: var(--rx-btn-font-size-md);
}

.rx-btn-lg {
  min-height: var(--rx-btn-height-lg);
  padding-inline: var(--rx-btn-padding-x-lg);
  font-size: var(--rx-btn-font-size-lg);
  gap: 0.625rem;
}

.rx-btn-xl {
  min-height: var(--rx-btn-height-xl);
  padding-inline: var(--rx-btn-padding-x-xl);
  font-size: var(--rx-btn-font-size-xl);
  gap: 0.75rem;
}


/* =========================================================
   9. BUTTON SHAPES
   ========================================================= */

.rx-btn-square {
  border-radius: 0;
}

.rx-btn-rounded-sm {
  border-radius: var(--rx-btn-radius-sm);
}

.rx-btn-rounded-md {
  border-radius: var(--rx-btn-radius-md);
}

.rx-btn-rounded-lg {
  border-radius: var(--rx-btn-radius-lg);
}

.rx-btn-rounded-xl {
  border-radius: var(--rx-btn-radius-xl);
}

.rx-btn-pill {
  border-radius: var(--rx-btn-radius-pill);
}

.rx-btn-circle {
  width: var(--rx-btn-height-md);
  min-width: var(--rx-btn-height-md);
  height: var(--rx-btn-height-md);
  min-height: var(--rx-btn-height-md);
  padding: 0;
  border-radius: 50%;
}

.rx-btn-circle.rx-btn-xs {
  width: var(--rx-btn-height-xs);
  min-width: var(--rx-btn-height-xs);
  height: var(--rx-btn-height-xs);
  min-height: var(--rx-btn-height-xs);
}

.rx-btn-circle.rx-btn-sm {
  width: var(--rx-btn-height-sm);
  min-width: var(--rx-btn-height-sm);
  height: var(--rx-btn-height-sm);
  min-height: var(--rx-btn-height-sm);
}

.rx-btn-circle.rx-btn-lg {
  width: var(--rx-btn-height-lg);
  min-width: var(--rx-btn-height-lg);
  height: var(--rx-btn-height-lg);
  min-height: var(--rx-btn-height-lg);
}

.rx-btn-circle.rx-btn-xl {
  width: var(--rx-btn-height-xl);
  min-width: var(--rx-btn-height-xl);
  height: var(--rx-btn-height-xl);
  min-height: var(--rx-btn-height-xl);
}


/* =========================================================
   10. BLOCK / FULL WIDTH BUTTON
   ========================================================= */

.rx-btn-block,
.rx-btn-full {
  width: 100%;
}

.rx-btn-auto {
  width: auto;
}


/* =========================================================
   11. ICON BUTTON SUPPORT
   ========================================================= */

.rx-btn-icon,
.rx-btn .rx-icon,
.rx-btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
}

.rx-btn svg {
  display: inline-block;
  fill: currentColor;
  stroke: currentColor;
}

.rx-btn-icon-only {
  width: var(--rx-btn-height-md);
  min-width: var(--rx-btn-height-md);
  height: var(--rx-btn-height-md);
  min-height: var(--rx-btn-height-md);
  padding: 0;
}

.rx-btn-icon-only.rx-btn-xs {
  width: var(--rx-btn-height-xs);
  min-width: var(--rx-btn-height-xs);
  height: var(--rx-btn-height-xs);
  min-height: var(--rx-btn-height-xs);
}

.rx-btn-icon-only.rx-btn-sm {
  width: var(--rx-btn-height-sm);
  min-width: var(--rx-btn-height-sm);
  height: var(--rx-btn-height-sm);
  min-height: var(--rx-btn-height-sm);
}

.rx-btn-icon-only.rx-btn-lg {
  width: var(--rx-btn-height-lg);
  min-width: var(--rx-btn-height-lg);
  height: var(--rx-btn-height-lg);
  min-height: var(--rx-btn-height-lg);
}

.rx-btn-icon-only.rx-btn-xl {
  width: var(--rx-btn-height-xl);
  min-width: var(--rx-btn-height-xl);
  height: var(--rx-btn-height-xl);
  min-height: var(--rx-btn-height-xl);
}

.rx-btn-icon-left {
  flex-direction: row;
}

.rx-btn-icon-right {
  flex-direction: row-reverse;
}


/* =========================================================
   12. BUTTON WITH BADGE
   ========================================================= */

.rx-btn-badge {
  position: absolute;
  inset-block-start: -0.45rem;
  inset-inline-end: -0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.25rem;
  border: 2px solid var(--rx-surface, #ffffff);
  border-radius: 999px;
  background: var(--rx-btn-danger-bg);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}


/* =========================================================
   13. LOADING BUTTON
   ========================================================= */

.rx-btn.is-loading,
.rx-btn[aria-busy="true"] {
  cursor: wait;
  pointer-events: none;
}

.rx-btn.is-loading > *,
.rx-btn[aria-busy="true"] > * {
  opacity: 0;
}

.rx-btn.is-loading::after,
.rx-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: rx-btn-spin 700ms linear infinite;
}

@keyframes rx-btn-spin {
  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   14. BUTTON GROUP
   ========================================================= */

.rx-btn-group {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
}

.rx-btn-group > .rx-btn {
  border-radius: 0;
  box-shadow: none;
}

.rx-btn-group > .rx-btn:not(:first-child) {
  margin-inline-start: calc(var(--rx-btn-border-width) * -1);
}

.rx-btn-group > .rx-btn:first-child {
  border-start-start-radius: var(--rx-btn-radius);
  border-end-start-radius: var(--rx-btn-radius);
}

.rx-btn-group > .rx-btn:last-child {
  border-start-end-radius: var(--rx-btn-radius);
  border-end-end-radius: var(--rx-btn-radius);
}

.rx-btn-group > .rx-btn:hover,
.rx-btn-group > .rx-btn:focus-visible,
.rx-btn-group > .rx-btn.is-active {
  z-index: 2;
}

.rx-btn-group-vertical {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

.rx-btn-group-vertical > .rx-btn {
  border-radius: 0;
  box-shadow: none;
}

.rx-btn-group-vertical > .rx-btn:not(:first-child) {
  margin-block-start: calc(var(--rx-btn-border-width) * -1);
}

.rx-btn-group-vertical > .rx-btn:first-child {
  border-start-start-radius: var(--rx-btn-radius);
  border-start-end-radius: var(--rx-btn-radius);
}

.rx-btn-group-vertical > .rx-btn:last-child {
  border-end-start-radius: var(--rx-btn-radius);
  border-end-end-radius: var(--rx-btn-radius);
}


/* =========================================================
   15. ACTIVE / SELECTED BUTTON
   ========================================================= */

.rx-btn.is-active,
.rx-btn[aria-pressed="true"],
.rx-btn[aria-current="page"] {
  background: var(--rx-btn-bg-active);
  border-color: var(--rx-btn-bg-active);
  color: var(--rx-btn-text);
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 0.12),
    var(--rx-btn-shadow-sm);
}

.rx-btn-outline.is-active,
.rx-btn-outline[aria-pressed="true"],
.rx-btn-outline[aria-current="page"] {
  background: var(--rx-btn-bg);
  color: var(--rx-btn-text);
}


/* =========================================================
   16. GRADIENT BUTTONS
   ========================================================= */

.rx-btn-gradient {
  --rx-btn-gradient-start: var(--rx-btn-primary-bg);
  --rx-btn-gradient-end: var(--rx-btn-accent-bg);

  background-image: linear-gradient(135deg, var(--rx-btn-gradient-start), var(--rx-btn-gradient-end));
  border-color: transparent;
  color: #ffffff;
  overflow: hidden;
}

.rx-btn-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(135deg, var(--rx-btn-gradient-end), var(--rx-btn-gradient-start));
  opacity: 0;
  transition: opacity var(--rx-btn-transition-duration) var(--rx-btn-transition-easing);
}

.rx-btn-gradient:hover::before {
  opacity: 1;
}

.rx-btn-gradient-medical {
  --rx-btn-gradient-start: #00897b;
  --rx-btn-gradient-end: #0b63ce;
}

.rx-btn-gradient-danger {
  --rx-btn-gradient-start: #dc2626;
  --rx-btn-gradient-end: #f97316;
}

.rx-btn-gradient-success {
  --rx-btn-gradient-start: #16a34a;
  --rx-btn-gradient-end: #0d9488;
}


/* =========================================================
   17. SHADOW / ELEVATION UTILITIES
   ========================================================= */

.rx-btn-flat {
  box-shadow: none;
}

.rx-btn-flat:hover {
  box-shadow: none;
}

.rx-btn-raised {
  box-shadow: var(--rx-btn-shadow-md);
}

.rx-btn-raised:hover {
  box-shadow: var(--rx-btn-shadow-lg);
}

.rx-btn-no-hover:hover {
  transform: none;
}


/* =========================================================
   18. FLOATING ACTION BUTTON
   ========================================================= */

.rx-btn-fab {
  position: fixed;
  inset-inline-end: var(--rx-btn-fab-inline-end, 1.25rem);
  inset-block-end: var(--rx-btn-fab-block-end, 1.25rem);
  z-index: var(--rx-z-fab, 1000);
  width: var(--rx-btn-fab-size, 3.5rem);
  min-width: var(--rx-btn-fab-size, 3.5rem);
  height: var(--rx-btn-fab-size, 3.5rem);
  min-height: var(--rx-btn-fab-size, 3.5rem);
  padding: 0;
  border-radius: 50%;
  box-shadow: var(--rx-btn-shadow-lg);
}

.rx-btn-fab:hover {
  transform: translateY(-2px) scale(1.02);
}

.rx-btn-fab:active {
  transform: translateY(0) scale(0.98);
}


/* =========================================================
   19. SPECIAL MEDICAL CTA BUTTONS
   ========================================================= */

.rx-btn-appointment {
  --rx-btn-bg: #0b63ce;
  --rx-btn-bg-hover: #084fa6;
  --rx-btn-bg-active: #063f86;
  --rx-btn-text: #ffffff;
  --rx-btn-border: #0b63ce;
}

.rx-btn-emergency {
  --rx-btn-bg: #dc2626;
  --rx-btn-bg-hover: #b91c1c;
  --rx-btn-bg-active: #991b1b;
  --rx-btn-text: #ffffff;
  --rx-btn-border: #dc2626;
  animation: rx-btn-emergency-pulse 1.8s ease-in-out infinite;
}

@keyframes rx-btn-emergency-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(220 38 38 / 0.35);
  }

  50% {
    box-shadow: 0 0 0 0.55rem rgb(220 38 38 / 0);
  }
}

.rx-btn-call {
  --rx-btn-bg: #16a34a;
  --rx-btn-bg-hover: #15803d;
  --rx-btn-bg-active: #166534;
  --rx-btn-text: #ffffff;
  --rx-btn-border: #16a34a;
}

.rx-btn-whatsapp {
  --rx-btn-bg: #25d366;
  --rx-btn-bg-hover: #1ebe5d;
  --rx-btn-bg-active: #169c4b;
  --rx-btn-text: #ffffff;
  --rx-btn-border: #25d366;
}

.rx-btn-prescription {
  --rx-btn-bg: #7c3aed;
  --rx-btn-bg-hover: #6d28d9;
  --rx-btn-bg-active: #5b21b6;
  --rx-btn-text: #ffffff;
  --rx-btn-border: #7c3aed;
}


/* =========================================================
   20. DOWNLOAD / READ MORE / SEARCH BUTTONS
   ========================================================= */

.rx-btn-read-more {
  --rx-btn-bg: var(--rx-color-primary, #0b63ce);
  --rx-btn-bg-hover: #084fa6;
  --rx-btn-bg-active: #063f86;
}

.rx-btn-download {
  --rx-btn-bg: #0f766e;
  --rx-btn-bg-hover: #115e59;
  --rx-btn-bg-active: #134e4a;
  --rx-btn-text: #ffffff;
  --rx-btn-border: #0f766e;
}

.rx-btn-search {
  --rx-btn-bg: #0284c7;
  --rx-btn-bg-hover: #0369a1;
  --rx-btn-bg-active: #075985;
  --rx-btn-text: #ffffff;
  --rx-btn-border: #0284c7;
}

.rx-btn-reset {
  --rx-btn-bg: #64748b;
  --rx-btn-bg-hover: #475569;
  --rx-btn-bg-active: #334155;
  --rx-btn-text: #ffffff;
  --rx-btn-border: #64748b;
}


/* =========================================================
   21. SOCIAL BUTTONS
   ========================================================= */

.rx-btn-facebook {
  --rx-btn-bg: #1877f2;
  --rx-btn-bg-hover: #166fe5;
  --rx-btn-bg-active: #125cc0;
  --rx-btn-text: #ffffff;
  --rx-btn-border: #1877f2;
}

.rx-btn-twitter,
.rx-btn-x {
  --rx-btn-bg: #111827;
  --rx-btn-bg-hover: #030712;
  --rx-btn-bg-active: #000000;
  --rx-btn-text: #ffffff;
  --rx-btn-border: #111827;
}

.rx-btn-linkedin {
  --rx-btn-bg: #0a66c2;
  --rx-btn-bg-hover: #0959a8;
  --rx-btn-bg-active: #084b8d;
  --rx-btn-text: #ffffff;
  --rx-btn-border: #0a66c2;
}

.rx-btn-youtube {
  --rx-btn-bg: #ff0000;
  --rx-btn-bg-hover: #cc0000;
  --rx-btn-bg-active: #990000;
  --rx-btn-text: #ffffff;
  --rx-btn-border: #ff0000;
}

.rx-btn-github {
  --rx-btn-bg: #24292f;
  --rx-btn-bg-hover: #1b1f24;
  --rx-btn-bg-active: #0d1117;
  --rx-btn-text: #ffffff;
  --rx-btn-border: #24292f;
}


/* =========================================================
   22. WORDPRESS BLOCK BUTTON SUPPORT
   ========================================================= */

.wp-block-button .wp-block-button__link {
  border-radius: var(--rx-btn-radius);
  font-family: var(--rx-btn-font-family);
  font-weight: var(--rx-btn-font-weight);
  text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: var(--rx-btn-border-width) solid currentColor;
}

.wp-block-button.is-style-squared .wp-block-button__link {
  border-radius: 0;
}

.wp-block-button.is-style-pill .wp-block-button__link {
  border-radius: var(--rx-btn-radius-pill);
}


/* =========================================================
   23. FORM BUTTON NORMALIZATION
   ========================================================= */

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font: inherit;
}

button:not(.rx-btn),
input[type="button"]:not(.rx-btn),
input[type="submit"]:not(.rx-btn),
input[type="reset"]:not(.rx-btn) {
  cursor: pointer;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  cursor: not-allowed;
}


/* =========================================================
   24. BUTTON ROW / ACTION AREA
   ========================================================= */

.rx-btn-row,
.rx-action-row,
.rx-form-actions,
.rx-card-actions,
.rx-post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.rx-btn-row-center {
  justify-content: center;
}

.rx-btn-row-end {
  justify-content: flex-end;
}

.rx-btn-row-between {
  justify-content: space-between;
}

.rx-btn-row-stretch > .rx-btn {
  flex: 1 1 auto;
}


/* =========================================================
   25. RESPONSIVE BUTTONS
   ========================================================= */

@media (max-width: 575.98px) {
  .rx-btn-mobile-full {
    width: 100%;
  }

  .rx-btn-row-mobile-stack {
    flex-direction: column;
    align-items: stretch;
  }

  .rx-btn-row-mobile-stack > .rx-btn {
    width: 100%;
  }

  .rx-btn {
    white-space: normal;
  }
}


/* =========================================================
   26. DARK MODE SUPPORT
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --rx-btn-surface-bg: #111827;
    --rx-btn-surface-bg-hover: #1f2937;
    --rx-btn-surface-bg-active: #374151;
    --rx-btn-surface-text: #f9fafb;
    --rx-btn-surface-border: #374151;

    --rx-btn-light-bg: #1f2937;
    --rx-btn-light-bg-hover: #374151;
    --rx-btn-light-bg-active: #4b5563;
    --rx-btn-light-text: #f9fafb;
    --rx-btn-light-border: #4b5563;
  }

  .rx-btn:focus-visible {
    box-shadow:
      0 0 0 var(--rx-btn-focus-ring-offset) #111827,
      0 0 0 calc(var(--rx-btn-focus-ring-offset) + var(--rx-btn-focus-ring-width)) var(--rx-btn-focus-ring-color);
  }

  .rx-btn-soft {
    background: color-mix(in srgb, var(--rx-btn-bg) 20%, #111827);
    color: #ffffff;
    border-color: color-mix(in srgb, var(--rx-btn-bg) 35%, #111827);
  }

  .rx-btn-soft:hover {
    background: color-mix(in srgb, var(--rx-btn-bg) 28%, #111827);
  }
}

[data-theme="dark"] {
  --rx-btn-surface-bg: #111827;
  --rx-btn-surface-bg-hover: #1f2937;
  --rx-btn-surface-bg-active: #374151;
  --rx-btn-surface-text: #f9fafb;
  --rx-btn-surface-border: #374151;

  --rx-btn-light-bg: #1f2937;
  --rx-btn-light-bg-hover: #374151;
  --rx-btn-light-bg-active: #4b5563;
  --rx-btn-light-text: #f9fafb;
  --rx-btn-light-border: #4b5563;
}


/* =========================================================
   27. HIGH CONTRAST MODE
   ========================================================= */

@media (prefers-contrast: more) {
  .rx-btn {
    border-width: 2px;
    box-shadow: none;
  }

  .rx-btn:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
    box-shadow: none;
  }

  .rx-btn-ghost,
  .rx-btn-link {
    text-decoration-thickness: 2px;
  }
}


/* =========================================================
   28. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .rx-btn,
  .rx-btn::before,
  .rx-btn::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .rx-btn:hover,
  .rx-btn:active,
  .rx-btn-fab:hover,
  .rx-btn-fab:active {
    transform: none;
  }

  .rx-btn-emergency {
    animation: none;
  }
}


/* =========================================================
   29. PRINT SUPPORT
   ========================================================= */

@media print {
  .rx-btn {
    background: transparent !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  .rx-btn-fab,
  .rx-btn-print-hidden {
    display: none !important;
  }
}


/* =========================================================
   30. UTILITY STATE CLASSES
   ========================================================= */

.rx-btn-hidden {
  display: none !important;
}

.rx-btn-invisible {
  visibility: hidden !important;
}

.rx-btn-nowrap {
  white-space: nowrap !important;
}

.rx-btn-wrap {
  white-space: normal !important;
}

.rx-btn-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rx-btn-lowercase {
  text-transform: lowercase;
}

.rx-btn-capitalize {
  text-transform: capitalize;
}

.rx-btn-fw-normal {
  font-weight: 400;
}

.rx-btn-fw-medium {
  font-weight: 500;
}

.rx-btn-fw-bold {
  font-weight: 700;
}


/* =========================================================
   31. EXAMPLE HTML USAGE
   ---------------------------------------------------------
   <a href="#" class="rx-btn rx-btn-primary">Primary</a>
   <a href="#" class="rx-btn rx-btn-medical">Medical</a>
   <a href="#" class="rx-btn rx-btn-outline rx-btn-primary">Outline</a>
   <a href="#" class="rx-btn rx-btn-soft rx-btn-success">Soft Success</a>
   <button class="rx-btn rx-btn-danger is-loading">
     <span>Loading</span>
   </button>
   <button class="rx-btn rx-btn-icon-only" aria-label="Search">
     <svg></svg>
   </button>
   ========================================================= */

Best usage example:

<a class="rx-btn rx-btn-primary" href="#">Read More</a>

<a class="rx-btn rx-btn-medical rx-btn-lg rx-btn-pill" href="#">
  Book Appointment
</a>

<button class="rx-btn rx-btn-danger rx-btn-outline">
  Emergency
</button>

<button class="rx-btn rx-btn-success is-loading">
  <span>Submitting...</span>
</button>

Leave a Reply

Your email address will not be published. Required fields are marked *