27 CSS Button Hover Effects 06 / 27
Kinetic Text Flip & Icon Reveal Button Effects
Typography and icon micro-interactions in compact pills — a vertical two-label flip, an Add-to-Cart text-out / icon-in reveal, per-letter staggered lift, and an arrow that slides in with text shift.
The code
<section class="bhe-ktf" aria-label="Kinetic text flip icon reveal button effects demo">
<div class="bhe-ktf__cell">
<button class="bhe-ktf__btn bhe-ktf__flip" type="button"><span class="bhe-ktf__flipInner"><span>Download</span><span>Let’s Go!</span></span></button>
<span class="bhe-ktf__label">Vertical Flip</span>
</div>
<div class="bhe-ktf__cell">
<button class="bhe-ktf__btn bhe-ktf__cart" type="button"><span class="bhe-ktf__txt">Add to Cart</span><span class="bhe-ktf__ico" aria-hidden="true">🛒</span></button>
<span class="bhe-ktf__label">Icon Reveal</span>
</div>
<div class="bhe-ktf__cell">
<button class="bhe-ktf__btn bhe-ktf__letters" type="button"><span class="bhe-ktf__l">C</span><span class="bhe-ktf__l">o</span><span class="bhe-ktf__l">n</span><span class="bhe-ktf__l">f</span><span class="bhe-ktf__l">i</span><span class="bhe-ktf__l">r</span><span class="bhe-ktf__l">m</span></button>
<span class="bhe-ktf__label">Letter Stagger</span>
</div>
<div class="bhe-ktf__cell">
<button class="bhe-ktf__btn bhe-ktf__arrow" type="button">Continue<span class="bhe-ktf__arrowIco" aria-hidden="true">→</span></button>
<span class="bhe-ktf__label">Arrow Slide</span>
</div>
</section> <section class="bhe-ktf" aria-label="Kinetic text flip icon reveal button effects demo">
<div class="bhe-ktf__cell">
<button class="bhe-ktf__btn bhe-ktf__flip" type="button"><span class="bhe-ktf__flipInner"><span>Download</span><span>Let’s Go!</span></span></button>
<span class="bhe-ktf__label">Vertical Flip</span>
</div>
<div class="bhe-ktf__cell">
<button class="bhe-ktf__btn bhe-ktf__cart" type="button"><span class="bhe-ktf__txt">Add to Cart</span><span class="bhe-ktf__ico" aria-hidden="true">🛒</span></button>
<span class="bhe-ktf__label">Icon Reveal</span>
</div>
<div class="bhe-ktf__cell">
<button class="bhe-ktf__btn bhe-ktf__letters" type="button"><span class="bhe-ktf__l">C</span><span class="bhe-ktf__l">o</span><span class="bhe-ktf__l">n</span><span class="bhe-ktf__l">f</span><span class="bhe-ktf__l">i</span><span class="bhe-ktf__l">r</span><span class="bhe-ktf__l">m</span></button>
<span class="bhe-ktf__label">Letter Stagger</span>
</div>
<div class="bhe-ktf__cell">
<button class="bhe-ktf__btn bhe-ktf__arrow" type="button">Continue<span class="bhe-ktf__arrowIco" aria-hidden="true">→</span></button>
<span class="bhe-ktf__label">Arrow Slide</span>
</div>
</section>.bhe-ktf {
--bhe-ktf-bg: #f7f5f2;
--bhe-ktf-ink: #1c1b1a;
--bhe-ktf-muted: #8d8983;
--bhe-ktf-accent: #e85d04;
--bhe-ktf-dark: #1c1b1a;
--bhe-ktf-blue: #2563eb;
background: var(--bhe-ktf-bg); color: var(--bhe-ktf-ink);
font-family: 'Tahoma', 'Segoe UI', sans-serif;
display: flex; flex-wrap: wrap; gap: 3rem;
align-items: center; justify-content: center;
padding: 3rem 2rem; min-height: 320px;
box-sizing: border-box;
}
.bhe-ktf *, .bhe-ktf *::before, .bhe-ktf *::after { box-sizing: border-box; }
.bhe-ktf__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-ktf__label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bhe-ktf-muted); text-transform: uppercase; }
.bhe-ktf__btn {
position: relative; font-family: inherit; font-weight: 700; font-size: 1rem;
cursor: pointer; border: none; padding: 1.05rem 2.6rem; overflow: hidden;
letter-spacing: 0.03em;
}
/* 1: vertical text flip */
.bhe-ktf__flip {
background: var(--bhe-ktf-accent); color: #fff; border-radius: 10px;
height: 52px; display: inline-flex; align-items: center;
}
.bhe-ktf__flipInner { position: relative; display: block; height: 1.2em; overflow: hidden; }
.bhe-ktf__flipInner > span { display: block; transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1); }
.bhe-ktf__flipInner > span + span { position: absolute; top: 100%; left: 0; }
.bhe-ktf__flip:hover .bhe-ktf__flipInner > span { transform: translateY(-100%); }
/* 2: icon slide-in, text slide-out */
.bhe-ktf__cart {
background: var(--bhe-ktf-dark); color: var(--bhe-ktf-bg); border-radius: 10px;
min-width: 180px; height: 52px;
}
.bhe-ktf__txt, .bhe-ktf__ico {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.4s;
}
.bhe-ktf__txt { transform: translateY(0); }
.bhe-ktf__ico { transform: translateY(100%); opacity: 0; font-size: 1.4rem; }
.bhe-ktf__cart:hover .bhe-ktf__txt { transform: translateY(-100%); opacity: 0; }
.bhe-ktf__cart:hover .bhe-ktf__ico { transform: translateY(0); opacity: 1; }
/* 3: per-letter stagger */
.bhe-ktf__letters {
background: transparent; color: var(--bhe-ktf-blue);
border: 2px solid var(--bhe-ktf-blue); border-radius: 10px;
}
.bhe-ktf__l { display: inline-block; transition: transform 0.3s ease; }
.bhe-ktf__letters:hover .bhe-ktf__l { transform: translateY(-4px); }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(2) { transition-delay: 0.03s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(3) { transition-delay: 0.06s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(4) { transition-delay: 0.09s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(5) { transition-delay: 0.12s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(6) { transition-delay: 0.15s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(7) { transition-delay: 0.18s; }
/* 4: arrow reveal */
.bhe-ktf__arrow {
background: var(--bhe-ktf-accent); color: #fff; border-radius: 40px;
display: inline-flex; align-items: center; gap: 0.5rem;
padding-right: 3rem; transition: padding 0.35s ease;
}
.bhe-ktf__arrowIco {
position: absolute; right: 1.4rem;
opacity: 0; transform: translateX(-8px); transition: 0.35s ease; font-size: 1.2rem;
}
.bhe-ktf__arrow:hover { padding-right: 3.4rem; padding-left: 2.2rem; }
.bhe-ktf__arrow:hover .bhe-ktf__arrowIco { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
.bhe-ktf__btn, .bhe-ktf__flipInner > span, .bhe-ktf__txt, .bhe-ktf__ico,
.bhe-ktf__l, .bhe-ktf__arrowIco { transition: none; }
} .bhe-ktf {
--bhe-ktf-bg: #f7f5f2;
--bhe-ktf-ink: #1c1b1a;
--bhe-ktf-muted: #8d8983;
--bhe-ktf-accent: #e85d04;
--bhe-ktf-dark: #1c1b1a;
--bhe-ktf-blue: #2563eb;
background: var(--bhe-ktf-bg); color: var(--bhe-ktf-ink);
font-family: 'Tahoma', 'Segoe UI', sans-serif;
display: flex; flex-wrap: wrap; gap: 3rem;
align-items: center; justify-content: center;
padding: 3rem 2rem; min-height: 320px;
box-sizing: border-box;
}
.bhe-ktf *, .bhe-ktf *::before, .bhe-ktf *::after { box-sizing: border-box; }
.bhe-ktf__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-ktf__label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bhe-ktf-muted); text-transform: uppercase; }
.bhe-ktf__btn {
position: relative; font-family: inherit; font-weight: 700; font-size: 1rem;
cursor: pointer; border: none; padding: 1.05rem 2.6rem; overflow: hidden;
letter-spacing: 0.03em;
}
/* 1: vertical text flip */
.bhe-ktf__flip {
background: var(--bhe-ktf-accent); color: #fff; border-radius: 10px;
height: 52px; display: inline-flex; align-items: center;
}
.bhe-ktf__flipInner { position: relative; display: block; height: 1.2em; overflow: hidden; }
.bhe-ktf__flipInner > span { display: block; transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1); }
.bhe-ktf__flipInner > span + span { position: absolute; top: 100%; left: 0; }
.bhe-ktf__flip:hover .bhe-ktf__flipInner > span { transform: translateY(-100%); }
/* 2: icon slide-in, text slide-out */
.bhe-ktf__cart {
background: var(--bhe-ktf-dark); color: var(--bhe-ktf-bg); border-radius: 10px;
min-width: 180px; height: 52px;
}
.bhe-ktf__txt, .bhe-ktf__ico {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.4s;
}
.bhe-ktf__txt { transform: translateY(0); }
.bhe-ktf__ico { transform: translateY(100%); opacity: 0; font-size: 1.4rem; }
.bhe-ktf__cart:hover .bhe-ktf__txt { transform: translateY(-100%); opacity: 0; }
.bhe-ktf__cart:hover .bhe-ktf__ico { transform: translateY(0); opacity: 1; }
/* 3: per-letter stagger */
.bhe-ktf__letters {
background: transparent; color: var(--bhe-ktf-blue);
border: 2px solid var(--bhe-ktf-blue); border-radius: 10px;
}
.bhe-ktf__l { display: inline-block; transition: transform 0.3s ease; }
.bhe-ktf__letters:hover .bhe-ktf__l { transform: translateY(-4px); }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(2) { transition-delay: 0.03s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(3) { transition-delay: 0.06s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(4) { transition-delay: 0.09s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(5) { transition-delay: 0.12s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(6) { transition-delay: 0.15s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(7) { transition-delay: 0.18s; }
/* 4: arrow reveal */
.bhe-ktf__arrow {
background: var(--bhe-ktf-accent); color: #fff; border-radius: 40px;
display: inline-flex; align-items: center; gap: 0.5rem;
padding-right: 3rem; transition: padding 0.35s ease;
}
.bhe-ktf__arrowIco {
position: absolute; right: 1.4rem;
opacity: 0; transform: translateX(-8px); transition: 0.35s ease; font-size: 1.2rem;
}
.bhe-ktf__arrow:hover { padding-right: 3.4rem; padding-left: 2.2rem; }
.bhe-ktf__arrow:hover .bhe-ktf__arrowIco { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
.bhe-ktf__btn, .bhe-ktf__flipInner > span, .bhe-ktf__txt, .bhe-ktf__ico,
.bhe-ktf__l, .bhe-ktf__arrowIco { transition: none; }
}