CSS Button Generator

To create a custom CSS button, style an anchor or button element with properties like background-color, color, padding, border-radius, border, font-size, and cursor: pointer. Add :hover and :active pseudo-classes for interactive states. You can also add transitions for smooth hover animations and box-shadow for depth.

Use the :hover pseudo-class to define styles that apply when the user hovers over the button. Common hover effects include changing background color, adding box-shadow, scaling the button with transform: scale(), or adjusting opacity. Add 'transition' to the base button style for smooth animations between states.

Replace background-color with background: linear-gradient(direction, color1, color2). For example: background: linear-gradient(to right, #2563EB, #7C3AED); You can use any number of color stops and directions. For hover effects on gradient buttons, consider shifting colors or adjusting the gradient angle.

Common border-radius values for buttons are: 4-8px for subtle rounding, 12-16px for modern rounded buttons, and 9999px or 50% for fully pill-shaped buttons. The best value depends on your design system. Fully rounded pill buttons are trendy in modern UI, while slight rounding suits more traditional designs.

For accessible buttons, ensure sufficient color contrast between text and background (WCAG AA requires at least 4.5:1 ratio). Use semantic button elements instead of divs, provide visible focus styles (outline or box-shadow on :focus), make buttons large enough to tap on mobile (at least 44x44px), and include descriptive text content.