Buttons Library – Sohail Mumtaz

Get start today!

Both sides!

Get start today!

				
					.button-hover{
  position: relative;
  text-decoration: none;
}

.button-hover::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transition: transform 0.25s ease-out, transform-origin 0.25s ease-out;
  transform-origin: left;
}

.button-hover:hover::after {
  transform: scaleX(1);
  transform-origin: left; 
}
.elementor-sticky--effects .button-hover::after{
     background-color: #000 !important;
}

Let's get started

				
					/* Style of Arrow in the button */
.custom-btn-header  .elementor-button-icon {
    font-size: 21px;
    background:#6C6CFF;
    padding: 10px;
    border-radius: 30px;
    margin-left:10px;
    
    }
.custom-btn-header  .elementor-button-text{
        margin-top: 14px
    }

/* background animation on hover */
.grow-btn .elementor-button span{
    z-index: 1;
}
.grow-btn .elementor-button {
    position: relative;
    border-radius: 1em; /* Ensures smooth border */
    overflow: hidden; /* Prevents square corners from appearing */
}

/* Fix for the growing background */
.grow-btn .elementor-button::before {
    content: "";
    position: absolute;
    border-radius: inherit; /* Inherit border-radius */
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: #6C6CFF !important;
    transition: width 0.4s ease-in-out;
    z-index: 0;
}

/* Smooth expansion while maintaining rounded corners */
.grow-btn .elementor-button:hover::before {
    width: 100%;
    right: 0;
}

Both sides!

				
					.button-hover2 {
  position: relative;
  text-decoration: none;
}

.button-hover2::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transition: transform 0.25s ease-out;
  transform-origin: left;
}

.button-hover2:hover::after {
  transform: scaleX(1);
  transform-origin: left; 
}

/* Make the line disappear towards the right when hover is removed */
.button-hover2:not(:hover)::after {
  transform-origin: right;
  transform: scaleX(0);
}

/* Change the underline color when the header is sticky */
.elementor-sticky--effects .button-hover2::after {
  background-color: #000 !important;
}

Let's Create an Amazing Project Together 👋.