אנימציית חץ בתוך כפתור אלמנטור

אנימציית CSS פשוטה ליצירת חץ עם תנועה במעבר עכבר

הוסיפו וידג׳ט כפתור של אלמנטור

אפשר לעצב את הכפתור איך שתרצו, רק שימו לב שכנראה תצטרכו לסדר את השוליים הפנימיים של הכפתור לאחר הוספת הקוד (סגנון > שוליים פנימיים).

קוד CSS לאתרים בעברית

selector .elementor-button:hover .elementor-button-text:after {
    opacity: 1;
    margin-left: 15px;
    animation: lmn-leftarrow  0.4s ease infinite alternate;
}

selector .elementor-button .elementor-button-text:after {
    content: " >>";
    font-weight: 500;
    position: relative;
    opacity: 0;
    transition: 0.2s all;
}

@keyframes lmn-leftarrow {
    0%  {
        left:3px;
    }
    100% {
        left:0px;
    }
}
Code language: CSS (css)

קוד CSS לאתרים באנגלית

selector .elementor-button:hover .elementor-button-text:after {
    opacity: 1;
    animation: lmn-rightarrow  0.4s ease infinite alternate;
    margin-right: 15px;
}


selector .elementor-button .elementor-button-text:after {
    content: " >>";
    font-weight: 500;
    position: relative;
    opacity: 0;
    transition: 0.2s all;
    
}

@keyframes lmn-rightarrow {
    0%  {
        left:3px;
    }
    100% {
        left:0px;
    }
}Code language: CSS (css)