Letter Spacing
Letter spacing expands to create a subtle text response.
Letter spacing expands to create a subtle text response.
Live Demo
Hover over the element or press Tab to focus.
Source Code
Copy the HTML, CSS or JavaScript you need for your project.
HTML
<button type="button" class="tb-tip tb-tip--tracking">View details</button>CSS
/* このサンプル共通のボタン基本形（単体利用可） */
.tb-tip {
appearance: none;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55em;
min-width: 156px;
min-height: 52px;
padding: 13px 21px;
position: relative;
border: 1px solid #c8d2e2;
border-radius: 7px;
background: #fff;
color: #15233b;
font: 650 14px/1.35 system-ui, sans-serif;
text-decoration: none;
cursor: pointer;
isolation: isolate;
-webkit-tap-highlight-color: transparent;
}
.tb-tip:focus-visible {
outline: 3px solid #7864ed;
outline-offset: 4px;
}
.tb-tip--tracking {
letter-spacing: .01em;
transition: letter-spacing .28s ease, color .28s ease;
}
.tb-tip--tracking:is(:hover, :focus-visible, .is-active) {
letter-spacing: .14em;
color: #5844ba;
}
@media (prefers-reduced-motion: reduce) {
.tb-tip, .tb-tip::before, .tb-tip::after,
.tb-tip > span { transition-duration: .01ms !important;
animation-duration: .01ms !important; }
}
How to Use
Insert the HTML and add the CSS to your stylesheet. Adjust colors and sizes and avoid class conflicts.
Use Case
Navigation labels and editorial headings.
Technical Notes
Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.
Mobile: Verify focus and tap behavior on touch devices.
Browser: Uses modern CSS features.
Reduced Motion: Respects prefers-reduced-motion.