Buttons communicate actions users can take. Norbielink uses a single gradient button style — purple-to-magenta in both light and dark mode — available in three sizes.
Overview
The primary button uses a horizontal gradient. Only one accent color is used: #A614C3.
Sizes
Three sizes are available: Large for hero CTAs, Medium for standard actions, Small for compact contexts like inline form submissions.
Large
18px · 10.8/19.2px padding · 10px radius
Medium
14.5px · 9/16px padding · 10px radius
Small
11.68px · 7.25/12.89px padding · 10px radius
States
Hover adds a rgba(213,213,213,0.2) white-grey overlay over the gradient. Inactive reduces opacity to 50%.
Specs
| Property | Large | Medium | Small |
|---|---|---|---|
| Font size | 18px | 14.5px | 11.68px |
| Font weight | 400 (Regular) | ||
| Padding (V / H) | 10.8px / 19.2px | 9px / 16px | 7.25px / 12.89px |
| Border radius | 10px | ||
| Gradient (light) | linear-gradient(90deg, #5C2ED4 0%, #A614C3 65%) | ||
| Gradient (dark) | radial-gradient(171.32% 99.33% at 33.13% -9%, #282550 0%, #191735 55.82%, rgba(0,0,0,0.3) 74%, rgba(0,0,0,0) 100%), linear-gradient(88.34deg, #5C2ED4 0.11%, #A614C3 63.8%) | ||
| Box shadow | 0 4px 14px rgba(166,20,195,0.25) | ||
| Text color | white | ||
| Hover overlay | rgba(213, 213, 213, 0.2) | ||
| Inactive opacity | 50% | ||