Morphing Button

abhishek001
Jan 25, 2026 2
Live Preview

Live Editor

<div class="container">
        <button class="btn-morphing">
            <span class="blob"></span>
            <span class="text">Hover Me</span>
        </button>
    </div>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', sans-serif;
    background: #0f0f0f;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-morphing {
    position: relative;
    padding: 1.5rem 3.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1;
}

.blob {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ff6ec4, #7873f5);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    z-index: -1;
    transition: all 0.3s ease;
    animation: morph 8s ease-in-out infinite;
}

.btn-morphing:hover .blob {
    animation: morphFast 1s ease-in-out infinite;
    filter: blur(2px);
}

.text {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@keyframes morph {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: rotate(0deg);
    }
    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }
    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
        transform: rotate(45deg);
    }
    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
}

@keyframes morphFast {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
    50% {
        border-radius: 70% 30% 40% 60% / 60% 50% 50% 40%;
    }
}
Categories

Morphing Button

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
