רקע הכפתור מתמלא בצבע מהצד בהובר, והטקסט מתהפך.
מתי משתמשים: כפתורים משניים באתרי אופי. לא בעור השקט (שם ההובר הוא הכהיה).
הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית. הרכיב הזה מסתמך על dir="rtl".
/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.center{text-align:center}
/* CSS03 · מילוי כפתור מהצד */
.fill-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
min-height:52px;padding-inline:34px;border-radius:999px;border:2px solid var(--ink, #16182b);background:transparent;
color:var(--ink, #16182b);font-weight:600;font-size:16px;cursor:pointer;font-family:inherit;z-index:0;transition:color .35s}
.fill-btn::before{content:"";position:absolute;inset:0;background:var(--ink, #16182b);z-index:-1;
transform:translateX(101%);transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.fill-btn:hover{color:#fff}
.fill-btn:hover::before{transform:translateX(0)}<div class="stage tight center"><button class="fill-btn">עבור עליי עם העכבר</button></div>