<!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
body {
    padding: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #212738;
}

.blob-btn {
    position: relative;
    z-index: 2;
    transition: 1s ease all;
    animation-delay: 1s;
    background: none;
    color: #212738;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    font-family: sans-serif;
    padding: 20px 26px;
    display: inline-block;
}

.blob-btn::before, .blob-btn::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    transition: 1s ease all;
    border-radius: 0;
    animation-delay: 0.5s;
}

.blob-btn::before {
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
    background: #d1d646;
    width: 90%;
    height: 90%;
}

.blob-btn::after {
    border-radius: 30% 50% 56% 20%/50% 90% 50% 79%;
    background: #fc440f;
    width: 95%;
    height: 95%;
}

.blob-btn:hover::before, .blob-btn:focus::before {
    width: 107%;
    height: 122%;
    animation: blob 4.5s linear infinite;
    opacity: 1;
}

.blob-btn:hover::after, .blob-btn:focus::after {
    width: 105%;
    height: 120%;
    animation: blob-two 5s linear infinite;
    opacity: 1;
}

@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);
}
}

@keyframes blob-two {
0% {
    border-radius: 30% 50% 56% 20%/50% 90% 50% 79%;
    transform: translate(-50%, -50%) rotate(0deg);
}

15% {
    border-radius: 26% 74% 82% 18%/48% 41% 59% 52%;
    transform: translate(-48%, -53%) rotate(1deg);
}

40% {
    border-radius: 15% 15% 20% 15%/90% 60% 77% 70%;
    transform: translate(-52%, -57%) rotate(0);
}

75% {
    border-radius: 61% 39% 14% 86%/67% 43% 57% 33%;
    transform: translate(-47%, -52%) rotate(-1deg);
}

100% {
    border-radius: 30% 50% 56% 20%/50% 90% 50% 79%;
    transform: translate(-50%, -50%) rotate(0);
}
}
</style>
<a class="blob-btn" href="#">hover me</a><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>