320 px 1440 px Fit Framework tokens
HTML
1<button class="btn" type="button">Create pattern</button> CSS
No element selected 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64.btn { --btn-background: var(--semantic-action); --btn-border-color: var(--btn-background); --btn-text-color: var(--semantic-surface); --btn-min-block-size: 2.75rem; --btn-padding-block: var(--space-3xs); --btn-padding-inline: var(--space-s); --btn-font-size: var(--text-m); --btn-radius: var(--radius-m); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3xs); min-block-size: var(--btn-min-block-size, 2.75rem); border-width: 1px; border-style: solid; border-color: var(--btn-border-color, var(--btn-background, var(--semantic-action))); border-radius: var(--btn-radius, var(--radius-m)); padding: var(--btn-padding-block, var(--space-3xs)) var(--btn-padding-inline, var(--space-s)); background: var(--btn-background, var(--semantic-action)); color: var(--btn-text-color, var(--semantic-surface)); font-weight: var(--btn-font-weight, 650); font-size: var(--btn-font-size, var(--text-m)); line-height: 1.2; font-family: var(--font-body); text-decoration: none; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; &:hover { background: color-mix(in oklch, var(--btn-background, var(--semantic-action)) 88%, var(--semantic-text)); transform: translateY(-.1rem); } &:focus-visible { outline: 3px solid var(--semantic-focus); outline-offset: 2px; } &[data-variant="secondary"] { --btn-background: var(--semantic-surface); --btn-border-color: var(--semantic-border); --btn-text-color: var(--semantic-text); } &[data-variant="ghost"] { --btn-background: transparent; --btn-border-color: transparent; --btn-text-color: var(--semantic-action); } &[data-size="small"] { --btn-min-block-size: 2.25rem; --btn-padding-block: var(--space-4xs); --btn-padding-inline: var(--space-xs); --btn-font-size: var(--text-s); } &[data-size="large"] { --btn-min-block-size: 3.25rem; --btn-padding-block: var(--space-xs); --btn-padding-inline: var(--space-m); --btn-font-size: var(--text-l); } @media (prefers-reduced-motion: reduce) { & { transition: none; } }}