Button using HTML CSS

<button class="myuihub-button">book now</button>

.myuihub-button {
    display: inline-block;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-transform: capitalize;
    padding: 8px 18px;
    position: relative;
    z-index: 1;
    text-decoration: none;
    background-color: transparent;
    border: none;
    transition: all 0.3s ease 0s;
}

.myuihub-button:hover {
    color: #ffffff;
}

.myuihub-button:before,
.myuihub-button:after {
    content: "";
    background-color: #3D1053;
    width: 90%;
    height: 90%;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    animation-delay: 0.5s;
    transition: all 0.3s ease 0s;
}

.myuihub-button:after {
    background-color: #E16589;
    width: 100%;
    height: 100%;
    border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%;
}

.myuihub-button:hover:before {
    width: 105%;
    height: 122%;
    animation: blob 4.5s linear infinite;
}

.myuihub-button:hover:after {
    width: 105%;
    height: 120%;
    animation: blob 5s linear infinite;
}

@keyframes blob {
    0% {
        border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%;
        transform: translate(-50%, -50%) rotate(0);
    }
    20% {
        border-radius: 61% 39% 14% 86% / 67% 43% 57% 33%;
        transform: translate(-48%, -52%) rotate(1deg);
    }
    45% {
        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
        transform: translate(-52%, -54%) rotate(0);
    }
    85% {
        border-radius: 30% 50% 56% 20% / 50% 90% 50% 79%;
        transform: translate(-49%, -48%) rotate(-1deg);
    }
    100% {
        border-radius: 15% 15% 20% 15% / 90% 60% 77% 70%;
        transform: translate(-50%, -50%) rotate(0);
    }
}

<button class="myuihub-button">
    <div class="myuihub-svg">
        <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.00415 2.99591H8.59415L0.294151 11.2859C0.105848 11.4742 5.91278e-05 11.7296 5.91278e-05 11.9959C5.91278e-05 12.2622 0.105848 12.5176 0.294151 12.7059C0.482455 12.8942 0.737849 13 1.00415 13C1.27045 13 1.52585 12.8942 1.71415 12.7059L10.0042 4.40591V11.9959C10.0042 12.2611 10.1095 12.5155 10.297 12.703C10.4846 12.8906 10.7389 12.9959 11.0042 12.9959C11.2694 12.9959 11.5237 12.8906 11.7113 12.703C11.8988 12.5155 12.0042 12.2611 12.0042 11.9959V1.99591C12.0026 1.86523 11.9754 1.73613 11.9242 1.61591C11.8227 1.37156 11.6285 1.17738 11.3842 1.07591C11.2639 1.02467 11.1348 0.997489 11.0042 0.995909H1.00415C0.738934 0.995909 0.484579 1.10126 0.297043 1.2888C0.109506 1.47634 0.00415039 1.73069 0.00415039 1.99591C0.00415039 2.26113 0.109506 2.51548 0.297043 2.70302C0.484579 2.89055 0.738934 2.99591 1.00415 2.99591Z" /></svg>
    </div>
    get in touch
</button>

.myuihub-button {
    display: inline-block;
    color: #ffffff;
    background-color: #333333;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    padding: 12px 16px 12px 40px;
    border: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.myuihub-button:hover {
    color: #333333;
    padding: 12px 28px;
}

.myuihub-button .myuihub-svg {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffcc15;
    border-radius: 50%;
    z-index: -1;
    transition: all 300ms ease-in-out;
}

.myuihub-button:hover .myuihub-svg {
    width: 700px;
    height: 700px;
}

.myuihub-button .myuihub-svg svg {
    width: 10px;
    height: 10px;
    fill: #333333;
    transition: all 300ms ease-in-out;
}

.myuihub-button:hover .myuihub-svg svg {
    width: 0;
    height: 0;
}

<button class="myuihub-button">
    <div class="myuihub-svg">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" fill-rule="evenodd" class=""><g transform="matrix(1.0999999999999994,0,0,1.0999999999999994,-1.199993109703053,-1.2000000238418451)"><path d="M16.25 7a.75.75 0 0 1-1.5 0V5.5a2.75 2.75 0 1 0-5.5 0V7a.75.75 0 0 1-1.5 0V5.5a4.25 4.25 0 0 1 8.5 0z" class=""></path><path d="m19.342 8.35.8 12a2.253 2.253 0 0 1-2.245 2.4H6.103a2.251 2.251 0 0 1-2.245-2.4l.8-12a2.25 2.25 0 0 1 2.245-2.1h10.194a2.25 2.25 0 0 1 2.245 2.1zm-4.856 2.328a2.753 2.753 0 0 1-4.972 0 .75.75 0 1 0-1.355.644 4.25 4.25 0 0 0 7.682 0 .75.75 0 0 0-1.355-.644z" class=""></path></g></svg>
    </div>
    shop now
</button>

.myuihub-button {
    display: inline-block;
    padding: 10px 20px;
    color: #f3e338;
    text-transform: capitalize;
    padding-left: 60px;
    position: relative;
    transform: translateZ(0px);
    border: 1px solid #1C1F20;
    background-color: #1C1F20;
    text-decoration: none;
    font-size: 16px;
    line-height: 24px;
    transition: all 0.5s ease 0s;
}

.myuihub-button:hover {
    color: #1C1F20;
}

.myuihub-button:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #f3e338;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: 100% 50% 0;
    transition: all 0.5s ease-out 0s;
}

.myuihub-button:hover:after {
    transform: scaleX(1);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.myuihub-button .myuihub-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 100%;
    background-color: #f3e338;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s linear 0s;
}

.myuihub-button .myuihub-svg::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background-color: #f3e338;
    margin: auto 0;
    position: absolute;
    top: 0;
    right: -4px;
    bottom: 0;
    transform: rotate(45deg);
    transition: all 0.3s linear 0s;
}

.myuihub-button .myuihub-svg svg {
    width: 20px;
    height: 20px;
}

.myuihub-button:hover,
.myuihub-button svg {
    fill: #1C1F20;
}

.myuihub-button:hover .myuihub-svg,
.myuihub-button:hover .myuihub-svg:after {
    background-color: #1C1F20;
}

.myuihub-button:hover .myuihub-svg svg {
    fill: #f3e338;
}