Modern CSS Demos

Loading ...

*:focus {
    outline: none;
}

*:focus-visible {
    box-shadow:
        0 0 0 2px black,
        0 0 0 4px white
    ;
}

.button-holder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100dvh;
}

.button-container {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-container-focus-within:focus-within {
    background-color: color-mix(in srgb, #689f38, transparent);
}

.button-container-focus-within:focus-within:after {
    --star-url: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='%23ecd803'%3e%3cpath d='M13.7 6H9.8L8.5 2.1c-.2-.4-.7-.4-.9 0L6.2 6H2.3c-.5 0-.7.6-.4.9l3 2.8-1.4 4.1c-.2.4.3.9.7.6L8 12l3.8 2.4c.4.2.9-.2.7-.6l-1.4-4.1 3-2.8c.3-.3.1-.9-.4-.9z'/%3e%3c/g%3e%3c/svg%3e");
    --star-size: 4rem;
    --star-position: 0;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100vh;
    width: 100vh;
    background:
        var(--star-url) calc(50% - (1.0rem * var(--star-position))) calc(50% - (1.0rem * var(--star-position))) / var(--star-size) no-repeat,
        var(--star-url) calc(50%                                  ) calc(50% - (1.5rem * var(--star-position))) / var(--star-size) no-repeat,
        var(--star-url) calc(50% + (1.0rem * var(--star-position))) calc(50% - (1.0rem * var(--star-position))) / var(--star-size) no-repeat,

var(--star-url) calc(50% - (1.0rem * var(--star-position))) calc(50% + (1.0rem * var(--star-position))) / var(--star-size) no-repeat,
        var(--star-url) calc(50%                                  ) calc(50% + (1.5rem * var(--star-position))) / var(--star-size) no-repeat,
        var(--star-url) calc(50% + (1.0rem * var(--star-position))) calc(50% + (1.0rem * var(--star-position))) / var(--star-size) no-repeat,

var(--star-url) calc(50% + (1.5rem * var(--star-position))) calc(50%                                  ) / var(--star-size) no-repeat,
        var(--star-url) calc(50% - (1.5rem * var(--star-position))) calc(50%                                  ) / var(--star-size) no-repeat,

transparent
    ;
    rotate: 0;
    animation: stars 1s linear infinite;
    translate: -50% -50%;
}

.button-container-focus-within:focus-within:before {
    --space: 10px;
    --color: #689f38;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: repeating-radial-gradient(
        circle,
        color-mix(in srgb, var(--color), transparent 25%) calc(var(--space) * 0),
        color-mix(in srgb, var(--color), transparent 25%) calc(var(--space) * 1),
        color-mix(in srgb, var(--color), transparent) calc(var(--space) * 1),
        color-mix(in srgb, var(--color), transparent) calc(var(--space) * 2)
      );
    height: 100%;
    width: 100%;
    animation: pulse 1s linear infinite;
}

button {
    z-index: 1;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1rem 1.5rem;

color: var(--demo-color);
    background: var(--demo-bg);

border: 4px solid currentColor;
    border-radius: .5rem;
}

button:hover {
    border-color: color-mix(in srgb, #689f38, var(--demo-color));
}

button:focus {
    border-color: #689f38;
}

@property --color {
    syntax: '<color>';
    initial-value: #000000;
    inherits: false;
}

@property --space {
    syntax: '<length>';
    initial-value: 0;
    inherits: false;
}

@keyframes pulse {
    0% {
        --color: #ecd803;
        --space: 20px;
    }
    80% {
        --color: #ec8603;
        --space: 10px;
    }
    100% {
        --color: #ecd803;
        --space: 20px;
    }
}

@property --star-position {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

@property --star-size {
    syntax: '<length>';
    initial-value: 0;
    inherits: false;
}

@keyframes stars {
    0% {
        --star-position: 0;
        --star-size: 1rem;
        rotate: 0
    }
    100% {
        rotate: 45deg;
        --star-size: 10rem;
        --star-position: 15;
    }
}

Zoom

Document

Container