HTML Button Deformation on Hover

Written by @kerixa 28 March 2021

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.

Code Snippet:

                                                
                                                <!-- this script is provided by https://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='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300