Ghost Outline Button

---
/**
 * GhostOutlineButton — A minimalist transparent button with gradient outlines and animated borders.
 * 
 * @param {string} href - Optional. If provided, renders an <a> tag instead of <button>.
 * @param {'button'|'submit'|'reset'} type - Optional. The HTML button type. Default is 'button'.
 * @param {string} primaryColor - Optional. Starts the gradient outline color.
 * @param {string} secondaryColor - Optional. Ends the gradient outline color.
 * @param {'sm'|'md'|'lg'} size - Optional. The size variant of the button. Default is 'md'.
 * @param {boolean} disabled - Optional. Whether the button is disabled. Default is false.
 */
interface Props {
  href?: string;
  type?: 'button' | 'submit' | 'reset';
  primaryColor?: string;
  secondaryColor?: string;
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
}

const { 
  href, 
  type = 'button', 
  primaryColor = '#6366f1',
  secondaryColor = '#c084fc',
  size = 'md',
  disabled = false 
} = Astro.props;

const Tag = href ? 'a' : 'button';
---

<Tag 
  href={href} 
  type={href ? undefined : type}
  disabled={disabled}
  class={`ghost-grad-btn ghost-grad-btn--${size}`}
  style={`--primary-color: ${primaryColor}; --secondary-color: ${secondaryColor};`}
>
  <span class="ghost-grad-btn__text"><slot /></span>
</Tag>

<style>
  .ghost-grad-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    color: #fff;
    padding: 2px;
    border: none;
    border-radius: var(--r-md, 12px);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 700;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    font-family: var(--font-sans, inherit);
  }

  .ghost-grad-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    z-index: 1;
    transition: opacity 0.3s ease;
  }

  .ghost-grad-btn:hover:not(:disabled)::before {
    opacity: 0.8;
  }

  .ghost-grad-btn__text {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #0f172a;
    padding: 0.7rem 1.8rem;
    border-radius: calc(var(--r-md, 12px) - 2px);
    z-index: 2;
    transition: background 0.3s ease, color 0.3s ease;
  }

  .ghost-grad-btn:hover:not(:disabled) .ghost-grad-btn__text {
    background: transparent;
    color: #fff;
  }

  .ghost-grad-btn:hover:not(:disabled) {
    box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--primary-color), transparent 50%);
    transform: translateY(-1px);
  }

  .ghost-grad-btn:active:not(:disabled) {
    transform: scale(0.98);
  }

  .ghost-grad-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
  }

  /* Sizes */
  .ghost-grad-btn--sm { font-size: 0.85rem; }
  .ghost-grad-btn--sm .ghost-grad-btn__text { padding: 0.45rem 1.2rem; }
  
  .ghost-grad-btn--md { font-size: 1rem; }
  .ghost-grad-btn--md .ghost-grad-btn__text { padding: 0.75rem 1.8rem; }
  
  .ghost-grad-btn--lg { font-size: 1.15rem; }
  .ghost-grad-btn--lg .ghost-grad-btn__text { padding: 1.1rem 2.5rem; }
</style>