In this video, I’ll show you how to create a beautiful button hover effect in elementor.
selector{ --btn-color:#333; --arrow-color:#fff; --btn-size: 60px; } selector .elementor-button{ position: relative; outline: none; border: 0; vertical-align: middle; text-decoration: none; background: transparent; box-shadow: none; padding: 0 calc(var(--btn-size) / 2.5); } selector .elementor-button-content-wrapper{ height: var(--btn-size); align-items: center; } selector .elementor-button-content-wrapper:before{ content: ""; display: block; position: absolute; width: var(--btn-size); height: var(--btn-size); background: var(--btn-color); margin: 0; left: 0; top: 0; border-radius: 15em; transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); } selector .elementor-button-text:before{ content: ""; display: block; position: absolute; width: 18px; height: 2px; background: none; top: 50%; left: -12px; margin-top: -1px; transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); } selector .elementor-button-text:after{ content: ""; position: absolute; width: 10px; height: 10px; top: 50%; left: calc(var(--btn-size) - (var(--btn-size) + 2px)); margin-top: -5px; border-top: 2px solid var(--arrow-color); border-right: 2px solid var(--arrow-color); transform: rotate(45deg); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); } selector .elementor-button-text{ font-size: calc(var(--btn-size) / 3); padding-left: calc(var(--btn-size) - 10px);; position: relative; z-index: 1; transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); } /* Hover Animation */ selector .elementor-button:hover .elementor-button-content-wrapper:before{ width: 100%; } selector .elementor-button:hover .elementor-button-text{ color: var(--arrow-color); } selector .elementor-button:hover .elementor-button-text:before{ background: var(--arrow-color); transform: translate(17px, 0); } selector .elementor-button:hover .elementor-button-text:after{ transform: translate(15px, 0) rotate(45deg); }
Disclosure: Some of the links here are referral/affiliate links which means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.
Plugin used