Every button style you need — solid, outlined, gradient, animated, 3D, neumorphic and neon. Click any example to copy the CSS instantly. No framework, no dependencies.
Use the background-color property for solid buttons or background with a gradient value for gradient buttons. Pair with color for text and border for outlined styles. Example: .btn { background-color: #6366f1; color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; }
Use the :hover pseudo-class and add transition for smooth animation. Example: .btn { background: #6366f1; transition: background 0.2s; } .btn:hover { background: #4f46e5; } For more advanced effects use transform: scale(1.05) or box-shadow changes on hover.
Use CSS @keyframes for looping animations or :hover with transition for interaction-triggered effects. For a slide-fill effect use a pseudo-element ::before with transform: scaleX(0) that scales to 1 on hover. For a pulse use @keyframes pulse with box-shadow changes.
Common values: 4–6px for subtle rounding (professional/enterprise feel), 8–12px for modern SaaS look, and 9999px for a pill/capsule button. Match the border-radius of your cards and inputs for a consistent design system.
Use background: transparent, border: 2px solid color, and color: color for the base state. On :hover set background to the border color and color to white. Add transition: all 0.25s for smoothness.