Html Code: HTML Button Deformation on Hover

The following code looks like a normal button, but on mouse hover, the button starts to deform like a liquid bubble, and this happens as long as the mouse cursor is on the button. This code attracts the visitors' attention more to your website and keeps them interested. Therefore, it will increase the ranking of your website.

<!-- this script got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<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="https://www.htmlbestcodes.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Best Codes</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Html Best Codes

Html Code: HTML Button Deformation on Hover

Links