プレビュー
HTML
<button type="button">Next</button>
CSS
:root {
--ink: #0f2740;
--paper: #eef6fb;
--accent: #1d6f9a;
--accent-2: #0f2740;
--on-accent: #f4fbff;
--muted: #5b7386;
--line: #c5d8e6;
--chip: #dceaf3;
}
button {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.2rem 0.5rem 0;
border: 0;
background: transparent;
color: var(--ink);
font: inherit;
font-weight: 700;
}
button::after {
content: "→";
color: var(--accent);
}
Tailwind
<style>
:root {
--ink: #0f2740;
--paper: #eef6fb;
--accent: #1d6f9a;
--accent-2: #0f2740;
--on-accent: #f4fbff;
--muted: #5b7386;
--line: #c5d8e6;
--chip: #dceaf3;
}
button::after {
content: "→";
color: var(--accent);
}
</style>
<button class="inline-flex items-center gap-[0.45rem] p-[0.5rem_0.2rem_0.5rem_0] [border:0] bg-transparent text-[var(--ink)] [font:inherit] font-bold" type="button">Next</button>