@import url("https://fonts.googleapis.com/css2?family=Bevan:ital@0;1&display=swap");

:root {
    --clip-shape: polygon(1% 1%, 10% 2%, 40% 0, 80% 2%, 99% 1%, 100% 70%, 99% 99%, 70% 98%, 30% 100%, 1% 99%, 0 30%);
    --light-color: cyan;
}

* {
    font-family: "Bevan", serif;
}

html,
body {
    margin: 0;
    background: #222;
    display: grid;
    place-content: center;
    min-height: 100vh;
}

button {
    font-size: 6rem;
    padding: 1.5rem 6rem;
    background: none;
}

.bananza {
    border: none;
    position: relative;
    color: white;
    z-index: 0;
    cursor: pointer;
    clip-path: var(--clip-shape);
    --angle: -45deg;
    --gradient: none;
}
.bananza::before {
    content: "";
    position: absolute;
    z-index: -20;
    inset: 0;
    background: var(--gradient);
}
.bananza::after {
    content: "";
    position: absolute;
    z-index: -10;
    inset: 0.05em;
    background-color: #111;
    clip-path: var(--clip-shape);
}

.bananza:hover {
    color: black;
}
.bananza:hover::before {
    background: yellow;
}
.bananza:hover::after {
    background: none;
}

.bananza .shader {
    display: none;
    position: absolute;
    inset: 0;
    z-index: -1;
}
.bananza:hover .shader {
    display: block;
}

.bananza.broken {
    color: black;
}
.bananza.broken::before {
    background: none;
}
.bananza.broken::after {
    background: none;
}
.bananza.broken .shader {
    display: block;
}