App UI buttons: primary, secondary, danger and more
These are the everyday buttons a web app needs: primary and secondary actions, success, danger, warning and info states, plus outline and subtle variants. Every one has a visible keyboard focus ring and readable text contrast.
Tips for primary, secondary & danger CSS buttons
Use one primary button per screen and make destructive actions red. Keep padding and radius the same across variants so they line up in a row. Change one property at a time (colour, not shape) between states.
Click any button above to get its CSS and HTML, or open the editor to tune the colours, font, shadows and hover animation and copy your own version.