Button Generator

.button {
  /* Content */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Typography */
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;

  /* Spacing */
  padding: 12px 24px;

  /* Colors */
  background-color: #3b82f6;
  color: #ffffff;

  /* Border */
  border: 2px solid #3b82f6;
  border-radius: 8px;

  /* Effects */
  box-shadow: none;
  
  transition: all 0.3s ease;

  /* Interaction */
  cursor: pointer;
}

.button:hover {
  background-color: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.button:active {
  transform: scale(0.98);
}

.button:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

<button class="button">Click Me</button>

<!-- Add Tailwind CSS and custom colors -->
<button class="inline-flex items-center justify-center gap-2 px-6 py-3 text-base font-semibold rounded-lg transition-all duration-300 ease-in-out cursor-pointer hover:-translate-y-0.5 hover:shadow-md"
  style="background-color: #3b82f6; color: #ffffff; border: 2px solid #3b82f6;">
  Click Me
</button>

<!-- Or use Tailwind color classes -->
<button class="inline-flex items-center justify-center gap-2 px-6 py-3 text-base font-semibold rounded-lg transition-all duration-300 ease-in-out cursor-pointer hover:-translate-y-0.5 hover:shadow-md bg-blue-500 hover:bg-blue-600 text-white border-blue-500">
  Click Me
</button>

import React from 'react';

const Button = ({
  children = 'Click Me',
  onClick,
  disabled = false,
  type = 'button',
  ...props
}) => {
  const styles = {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '8px',
    padding: '12px 24px',
    fontSize: '16px',
    fontWeight: '600',
    backgroundColor: '#3b82f6',
    color: '#ffffff',
    border: '2px solid #3b82f6',
    borderRadius: '8px',
    boxShadow: 'none',
    cursor: disabled ? 'not-allowed' : 'pointer',
    opacity: disabled ? 0.6 : 1,
    transition: 'all 0.3s ease',
  };

  return (
    <button
      style={styles}
      onClick={onClick}
      disabled={disabled}
      type={type}
      {...props}
    >
      
      {children}
      
    </button>
  );
};

export default Button;