Button w/ Hover Off Effect:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | selector .elementor-button-content-wrapper { align-items: center; display: inline-flex; } selector .elementor-button-icon { background-color: #56a6df; color: #fff; height: 50px; left: 0px; line-height: 50px; position: relative; top: 0; transition: all 500ms ease-in-out; width: 50px; } selector .elementor-button:hover .elementor-button-icon { transform: rotate(360deg); } selector .elementor-button-text { background-color: #3496d8; color: #fff; height: 50px; right: 0px; line-height: 50px; padding: 0 40px; position: relative; top: 0; animation: pull_right_1 1s; animation-fill-mode: forwards; transition: all 500ms ease-in-out; } selector .elementor-button:hover .elementor-button-text { animation: pull_right_2 1s; } @keyframes pull_right_1 { 0% { right: 0px; } 50% { right: -15px; } 100% { right: 0; } } @keyframes pull_right_2 { 0% { right: 0px; } 50% { right: -15px; } 100% { right: 0; } } |