47 רעיונות יצירתיים ל Hover Effects על כפתורים

אפקט Hover טוב על כפתור הוא לא רק תוספת קוסמטית – הוא מסמן למשתמש שמדובר באלמנט אינטראקטיבי שמגיב לפעולה. כפתור סטטי בלי פידבק ויזואלי מרגיש שטוח וחסר חיים.

בפוסט זה אציג 30 אפקטי Hover יצירתיים על כפתורים. החל מ-10 אפקטים שימושיים ומלוטשים שיכולים להתאים כמעט לכל פרויקט, ועד 20 אפקטים נועזים וניסיוניים שמשתמשים ב-@property, clip-path, אנימציות גרדיאנט, backdrop-filter וטכניקות CSS מודרניות נוספות.

שימו לב: אפקטי Hover פועלים בדסקטופ בלבד. מומלץ לצפות בדוגמאות ממחשב ולא ממובייל.

כפתורים שימושיים עם סטייל

10 אפקטים שנראים מלוטשים ומקצועיים ומתאימים לשימוש בממשקים אמיתיים.

1. Glass Shift

כפתור זכוכית חלבית עם backdrop-filter שמתרומם בריחוף.

.btn {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #e0e6ed;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

<button class="btn">Hover Me</button>

2. Ember Press

כפתור תלת-ממדי שנלחץ פנימה עם הילת זוהר חמימה.

.btn {
    background: #c0560a;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 0 #8b3d06, 0 8px 20px rgba(192, 86, 10, 0.3);
    transition: all 0.15s ease;
}
.btn:hover {
    transform: translateY(6px);
    box-shadow: 0 0 0 #8b3d06, 0 2px 8px rgba(192, 86, 10, 0.4),
                0 0 30px rgba(255, 140, 50, 0.25);
}

<button class="btn">Hover Me</button>

3. Ink Spread

עיגול כהה שמתפשט מהמרכז וממלא את הכפתור.

.btn {
    border: 2px solid #2c2c2c;
    border-radius: 4px;
    color: #2c2c2c;
    font-weight: 600;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #2c2c2c;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    z-index: -1;
}
.btn:hover::before {
    width: 340px;
    height: 340px;
}
.btn:hover {
    color: #faf3e8;
}

<button class="btn">Hover Me</button>

4. Velvet Sweep

מילוי משמאל לימין עם גרדיאנט סגול עשיר.

.btn {
    border: 1px solid #9b4dca;
    border-radius: 4px;
    color: #c084fc;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}
.btn:hover::before {
    transform: scaleX(1);
}
.btn:hover {
    color: #fff;
}

<button class="btn">Hover Me</button>

5. Wire Frame

סוגריים בפינות שגדלים לגבול מלא בריחוף.

.btn {
    color: #a0a0a0;
    position: relative;
}
.btn::before, .btn::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #666;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn::before {
    top: 4px; left: 4px;
    border-right: none; border-bottom: none;
}
.btn::after {
    bottom: 4px; right: 4px;
    border-left: none; border-top: none;
}
.btn:hover::before, .btn:hover::after {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-color: #00ff88;
}
.btn:hover {
    color: #00ff88;
}

<button class="btn">Hover Me</button>

6. Pulse Ring

טבעת קו מתאר שפועמת החוצה מהכפתור.

.btn {
    border: 2px solid #64ffda;
    border-radius: 50px;
    color: #64ffda;
    background: transparent;
}
.btn:hover {
    animation: pulse 1s ease-out;
    box-shadow: 0 0 20px rgba(100, 255, 218, 0.15);
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(100, 255, 218, 0.5); }
    100% { box-shadow: 0 0 0 16px rgba(100, 255, 218, 0); }
}

<button class="btn">Hover Me</button>

7. Silk Slide

הטקסט מחליק למעלה וטקסט חדש נכנס מלמטה.

.btn {
    background: #e63946;
    border-radius: 4px;
    color: #fff;
    overflow: hidden;
    position: relative;
}
.btn span {
    display: inline-block;
    transition: transform 0.35s ease, opacity 0.35s ease;
}
.btn::after {
    content: attr(data-hover);
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, 80%);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}
.btn:hover span {
    transform: translateY(-130%);
    opacity: 0;
}
.btn:hover::after {
    transform: translate(-50%, -50%);
    opacity: 1;
}

<button class="btn" data-hover="Click!"><span>Hover Me</span></button>

8. Horizon Line

קווים עליון ותחתון שגדלים מהמרכז החוצה.

.btn {
    color: #8ec5fc;
    padding: 16px 36px;
    position: relative;
}
.btn::before, .btn::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    width: 0;
    background: #8ec5fc;
    transition: width 0.4s ease;
}
.btn::before { top: 0; }
.btn::after { bottom: 0; }
.btn:hover::before, .btn:hover::after {
    width: 100%;
}
.btn:hover {
    color: #fff;
}

<button class="btn">Hover Me</button>

9. Matte Flip

היפוך צבעים – הרקע והטקסט מחליפים מקומות.

.btn {
    background: #2c2c2c;
    border-radius: 6px;
    color: #e8e0d4;
    font-weight: 600;
    border: 2px solid #2c2c2c;
    transition: all 0.3s ease;
}
.btn:hover {
    background: #e8e0d4;
    color: #2c2c2c;
}

<button class="btn">Hover Me</button>

10. Shadow Stack

צל רטרו שנמעך לשטוח בלחיצה – אפקט כפתור מישוש.

.btn {
    background: #fff;
    border: 2px solid #333;
    color: #333;
    font-weight: 600;
    box-shadow: 5px 5px 0 #333;
    transition: all 0.15s ease;
}
.btn:hover {
    box-shadow: 0 0 0 #333;
    transform: translate(5px, 5px);
}

<button class="btn">Hover Me</button>

אפקטים יצירתיים, נועזים וניסיוניים

כאן מתחיל החלק המעניין. 20 אפקטים שדוחפים את הגבולות עם גרדיאנטים מונפשים, clip-path, @property, ניאון, גליץ' ועוד.

11. Aurora Border

גבול מונפש עם conic-gradient מסתובב דרך @property.

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.btn {
    color: #e0e0e0;
    border-radius: 8px;
    background: #141428;
    position: relative;
    z-index: 1;
    --angle: 0deg;
}
.btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    background: conic-gradient(
        from var(--angle),
        #ff006e, #fb5607, #ffbe0b, #8338ec, #3a86ff, #ff006e
    );
    z-index: -2;
    opacity: 0;
    transition: opacity 0.3s;
}
.btn::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 6px;
    background: #141428;
    z-index: -1;
}
.btn:hover::before {
    opacity: 1;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    to { --angle: 360deg; }
}

<button class="btn">Hover Me</button>

12. Neon Surge

ניאון ציאן עוצמתי עם שכבות זוהר ו-text-shadow מתגבר.

.btn {
    border: 1px solid #0ff;
    color: #0ff;
    border-radius: 4px;
    text-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
    transition: all 0.3s ease;
}
.btn:hover {
    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.6),
        0 0 40px rgba(0, 255, 255, 0.3),
        0 0 80px rgba(0, 255, 255, 0.1),
        inset 0 0 20px rgba(0, 255, 255, 0.08);
    text-shadow:
        0 0 8px #0ff,
        0 0 20px rgba(0, 255, 255, 0.5);
    color: #fff;
}

<button class="btn">Hover Me</button>

13. Cyberpunk Clip

חיתוך זוויתי עם clip-path שמתמלא בזוהר בריחוף.

.btn {
    border: 1px solid #ff2a6d;
    color: #ff2a6d;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #ff2a6d;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
}
.btn:hover::before {
    opacity: 1;
}
.btn:hover {
    color: #fff;
    box-shadow: 0 0 30px rgba(255, 42, 109, 0.3);
}

<button class="btn">Hover Me</button>

14. Glitch Tremor

אפקט גליץ' עם פיצול RGB ורעידות מבוקרות.

.btn {
    background: #1a1a2e;
    border: 1px solid #e94560;
    color: #e94560;
    font-family: 'Courier New', monospace;
}
.btn:hover {
    animation: glitch 0.3s steps(2) infinite;
}
@keyframes glitch {
    0%   { transform: translate(0); text-shadow: none; }
    20%  { transform: translate(-3px, 2px);
           text-shadow: 3px 0 #00f0ff, -3px 0 #e94560; }
    40%  { transform: translate(3px, -2px);
           text-shadow: -2px 0 #e94560, 2px 0 #00f0ff; }
    60%  { transform: translate(-1px, -1px); }
    80%  { transform: translate(2px, 1px);
           text-shadow: -3px 0 #e94560, 3px 0 #00f0ff; }
    100% { transform: translate(0); text-shadow: none; }
}

<button class="btn">Hover Me</button>

15. Liquid Morph

הכפתור מתעוות לצורה אורגנית עם border-radius מורפי.

.btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 12px;
    color: #fff;
    transition: border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s ease,
                box-shadow 0.4s ease;
}
.btn:hover {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transform: scale(1.05) rotate(-2deg);
    box-shadow: 0 10px 40px rgba(118, 75, 162, 0.4);
}

<button class="btn">Hover Me</button>

16. Prismatic Shift

גרדיאנט שמשנה גוון ברציפות דרך @property.

@property --hue {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}
.btn {
    --hue: 0;
    background: hsl(calc(var(--hue) + 280), 70%, 55%);
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
}
.btn:hover {
    animation: prismatic 2.5s linear infinite;
    transform: scale(1.04);
}
@keyframes prismatic {
    to { --hue: 360; }
}

<button class="btn">Hover Me</button>

17. Magnetic Field

הכפתור עוקב אחרי סמן העכבר עם זוהר רדיאלי שעוקב אחר תנועת המאוס (דורש JS).

.btn {
    background: #21262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #c9d1d9;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s ease;
}
.btn:hover {
    border-color: rgba(136, 198, 255, 0.3);
    box-shadow: 0 0 20px rgba(136, 198, 255, 0.08);
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(136, 198, 255, 0.12) 0%,
        transparent 60%
    ) #21262d;
}

btn.addEventListener('mousemove', function (e) {
    var r = btn.getBoundingClientRect();
    btn.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
    btn.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%');
});

<button class="btn">Hover Me</button>

18. Terminal Scan

קו סריקה ירוק שעובר על הכפתור – אסתטיקת טרמינל.

.btn {
    background: rgba(0, 255, 65, 0.05);
    border: 1px solid rgba(0, 255, 65, 0.3);
    color: #00ff41;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}
.btn::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        transparent 30%,
        rgba(0, 255, 65, 0.2) 50%,
        transparent 70%
    );
    z-index: -1;
}
.btn:hover::after {
    animation: scan 1.2s ease-in-out infinite;
}
.btn:hover {
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
}
@keyframes scan {
    0%   { top: -100%; }
    100% { top: 200%; }
}

<button class="btn">EXECUTE</button>

19. Holographic Foil

גרדיאנט אירידסנטי שמחליף גוונים ברציפות.

.btn {
    background: linear-gradient(
        135deg,
        hsl(300, 80%, 60%),
        hsl(200, 80%, 60%),
        hsl(60, 80%, 60%),
        hsl(120, 80%, 60%),
        hsl(300, 80%, 60%)
    );
    background-size: 400% 400%;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.btn:hover {
    animation: holo 3s ease infinite;
    transform: scale(1.03);
}
@keyframes holo {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

<button class="btn">Hover Me</button>

20. Diamond Shatter

צורת יהלום שמתפרקת למלבן עם clip-path.

.btn {
    background: linear-gradient(135deg, #f72585, #b5179e);
    color: #fff;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    width: 130px;
    height: 130px;
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    box-shadow: 0 8px 30px rgba(247, 37, 133, 0.3);
}

<button class="btn">Hover Me</button>

21. Conic Spotlight

ספוטלייט מסתובב דרך conic-gradient ו-@property.

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.btn {
    --angle: 0deg;
    background: conic-gradient(
        from var(--angle),
        transparent 0%,
        rgba(255, 200, 50, 0.2) 10%,
        transparent 20%
    ), #1a1a2a;
    border: 1px solid rgba(255, 200, 50, 0.2);
    border-radius: 6px;
    color: #ffc832;
}
.btn:hover {
    animation: spotlight 2s linear infinite;
}
@keyframes spotlight {
    to { --angle: 360deg; }
}

<button class="btn">Hover Me</button>

22. Stitch Craft

אפקט תפירה מונפש עם outline מקווקו שמתהדק.

.btn {
    background: #c1440e;
    color: #ffeedd;
    border-radius: 6px;
    outline: 2px dashed transparent;
    outline-offset: -7px;
    transition: outline-color 0.3s, outline-offset 0.3s;
}
.btn:hover {
    outline-color: rgba(255, 238, 221, 0.7);
    outline-offset: -5px;
}

<button class="btn">Hover Me</button>

23. Smoke Trail

שכבות צללים שנפרסות כלפי מטה כמו עקבות עשן.

.btn {
    background: #fff;
    color: #141414;
    font-weight: 700;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.btn:hover {
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.7),
        0 5px 0 rgba(255, 255, 255, 0.5),
        0 9px 0 rgba(255, 255, 255, 0.3),
        0 14px 0 rgba(255, 255, 255, 0.15),
        0 20px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(-4px);
}

<button class="btn">Hover Me</button>

24. Venetian Reveal

דפוס פסים אופקיים שמופיע בריחוף כמו תריס ונציאני.

.btn {
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ccd6e0;
    position: relative;
    z-index: 1;
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        #4a90d9 0px, #4a90d9 3px,
        transparent 3px, transparent 8px
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}
.btn:hover::before {
    opacity: 1;
}
.btn:hover {
    border-color: #4a90d9;
    color: #fff;
}

<button class="btn">Hover Me</button>

25. Brutalist Shake

רעידה אגרסיבית עם גבולות עבים – אסתטיקה ברוטליסטית.

.btn {
    background: #000;
    border: 3px solid #000;
    color: #f0e68c;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.btn:hover {
    animation: shake 0.4s steps(4) infinite;
    background: #f0e68c;
    color: #000;
}
@keyframes shake {
    0%   { transform: translate(0); }
    25%  { transform: translate(-4px, 3px) rotate(-1deg); }
    50%  { transform: translate(4px, -2px) rotate(1deg); }
    75%  { transform: translate(-2px, -3px); }
    100% { transform: translate(0); }
}

<button class="btn">Hover Me</button>

26. Warp Drive

אשליית זום פנימה עם סיבוב פרספקטיבה.

.btn {
    background: linear-gradient(135deg, #3a0ca3, #4361ee);
    border-radius: 6px;
    color: #fff;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.5s ease;
}
.btn:hover {
    transform: perspective(600px) rotateY(-10deg) scale(1.08);
    box-shadow: 12px 6px 30px rgba(67, 97, 238, 0.35);
}

<button class="btn">Hover Me</button>

27. Paper Fold

פינה שנקפלת לאחור וחושפת צבע כהה יותר.

.btn {
    background: #4a7c59;
    color: #e8f5e9;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 0.4s ease;
}
.btn:hover {
    clip-path: polygon(
        0 0, 100% 0,
        100% calc(100% - 16px),
        calc(100% - 16px) 100%,
        0 100%
    );
}

<button class="btn">Hover Me</button>

28. Chromatic Ring

גבול כפול עם הסטה כרומטית באדום וכחול.

.btn {
    color: #e0e0e0;
    border-radius: 6px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}
.btn:hover {
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.6),
        3px 3px 0 0 rgba(255, 50, 50, 0.5),
        -3px -3px 0 0 rgba(50, 100, 255, 0.5);
    color: #fff;
}

<button class="btn">Hover Me</button>

29. Particle Burst

חלקיקים שמתפזרים החוצה מהכפתור דרך pseudo-elements.

.btn {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 6px;
    color: #c084fc;
    position: relative;
    z-index: 1;
}
.btn::before, .btn::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a855f7;
    opacity: 0;
    z-index: -1;
}
.btn::before { top: 50%; left: 25%; }
.btn::after  { top: 40%; right: 25%; }
.btn:hover::before {
    animation: p1 0.6s ease-out forwards;
}
.btn:hover::after {
    animation: p2 0.6s ease-out 0.05s forwards;
}
@keyframes p1 {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(-28px, -35px) scale(0); opacity: 0; }
}
@keyframes p2 {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(28px, -30px) scale(0); opacity: 0; }
}

<button class="btn">Hover Me</button>

30. Supernova

התפוצצות רדיאלית עם @property שמדמה סופרנובה.

@property --scale {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}
.btn {
    --scale: 0;
    background: radial-gradient(
        circle at center,
        rgba(255, 100, 50, calc(var(--scale) * 0.4)) 0%,
        rgba(255, 50, 80, calc(var(--scale) * 0.2)) 40%,
        transparent 70%
    ), #1a1020;
    border: 1px solid rgba(255, 100, 50, 0.3);
    border-radius: 50px;
    color: #ffb088;
    transition: --scale 0.5s ease,
                box-shadow 0.5s ease;
}
.btn:hover {
    --scale: 1;
    box-shadow:
        0 0 20px rgba(255, 100, 50, 0.3),
        0 0 60px rgba(255, 50, 80, 0.15);
    color: #fff;
}

<button class="btn">Hover Me</button>

שאלות נפוצות

סיכום

ראינו 30 אפקטי hover על כפתורים, מאפקטים שימושיים ומלוטשים כמו Glass Shift ו-Shadow Stack, ועד אפקטים ניסיוניים כמו Aurora Border, Glitch Tremor ו-Supernova שדוחפים את מה ש-CSS יכול לעשות.

כל האפקטים בדוגמאות נבנו ב-CSS בלבד, מלבד אפקט Magnetic Field שדורש כמה שורות JS. אתם מוזמנים להעתיק כל אפקט ולהתאים אותו לפרויקטים שלכם. אם אהבתם את הפוסט, כדאי לראות גם את האוסף שלי של אפקטי hover על תמונות.