Buttons – Elementor

				
					a.elementor-button {
  background: transparent;
  outline: none;
  border-radius: 50%;
  overflow: hidden;
  transform: scaleX(1);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1);
}

a.elementor-button:hover {
  animation: animate-scaleX 0.6s cubic-bezier(0.4, 0, 0, 1);
}

a.elementor-button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--e-global-color-primary);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1),
    border-radius 0.5s cubic-bezier(0.4, 0, 0, 1);
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0;
  transform: translateY(100%);
}

a.elementor-button:hover::after {
  transform: translateY(0%);
  border-radius: 0;
}

a.elementor-button span {
  display: inline-flex;
  overflow: hidden;
  position: relative;
}

a.elementor-button span:after {
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1);
  content: attr(data-text);
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: 1px;
  z-index: 1;
  transform: translate(-50%, 100%);
  color: white;
}
a.elementor-button:hover span:after {
  transform: translate(-50%, 0);
}

a.elementor-button:focus {
    outline: none;
}

@keyframes animate-scaleX {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.05);
  }
  100% {
    transform: scaleX(1);
  }
}

				
					<script>
        // Function to dynamically adjust the data-text attribute
        function adjustDataTextAttribute() {
            // Select all 'a' tags with the '.elementor-button' class
            var anchorElements = document.querySelectorAll('a.elementor-button');

            // Iterate over the found elements
            anchorElements.forEach(function (anchorElement) {
                // Select the span inside the 'a' tag with the '.elementor-button-text' class
                var spanElement = anchorElement.querySelector('.elementor-button-text');

                // Check if the span exists
                if (spanElement) {
                    // Get the text inside the span using textContent
                    var spanText = spanElement.textContent;

                    // Add the 'data-text' attribute to the 'span' tag with the found text
                    spanElement.dataset.text = spanText;
                }
            });
        }

        // Add an event to execute the function after DOM loading
        document.addEventListener('DOMContentLoaded', function () {
            adjustDataTextAttribute();
        });
    </script>