Shatter on click

jitesh208

Jan 20, 2026 2

Live Preview

Live Editor

  <button class="shatter-button">
        <span class="button-text">Click</span>
        <canvas id="shatterCanvas"></canvas>
    </button>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    font-family: 'Arial', sans-serif;
    overflow: hidden;
}

.shatter-button {
    position: relative;
    padding: 30px 90px;
    font-size: 22px;
    font-weight: bold;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    cursor: pointer;
    overflow: visible;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.5),
                inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.button-text {
    position: relative;
    color: white;
    text-transform: uppercase;
    letter-spacing: 3px;
    z-index: 2;
}

.shatter-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(102, 126, 234, 0.7),
                inset 0 0 30px rgba(255, 255, 255, 0.2);
}

.shatter-button:active {
    transform: scale(0.98);
}

#shatterCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

Categories

Shatter on click

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet