Modern CSS Demos

Loading ...

:root {
    --modal-bg: #fafafa;
    --modal-color: #313131;
    --modal-padding: 1.5rem;
    --modal-border-radius: 1rem;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    display: none;
    translate: -50% -50%;
    padding: var(--modal-padding);
    border-radius: var(--modal-border-radius);
    transition-property: opacity, display, top, scale;
    transition-duration: 0.5s;
    color: var(--modal-color);
    background: var(--modal-bg);
    opacity: 1;
    width: clamp(12rem, 80vw, 38rem);
    scale: 1;

@starting-style {
        top: 100%;
        opacity: 0;
        scale: 0.25;
    }

& > *:first-child {
        margin-top: 0;
    }

&.show {
        display: block;
    }
}

:root {
    --btn-color: #ffffff;
    --btn-bg: #9c27b0;
    --btn-border-color: hsl(from var(--btn-bg) h s calc(l * 1.2));
    --btn-hover-color: var(--btn-color);
    --btn-hover-bg: hsl(from var(--btn-bg) h s calc(l * 1.1));
    --btn-hover-border-color: hsl(from var(--btn-bg) h s calc(l * 1.3));
    --btn-focus-color: var(--btn-color);
    --btn-focus-bg: hsl(from var(--btn-bg) h s calc(l * 1.2));
    --btn-focus-border-color: hsl(from var(--btn-bg) h s calc(l * 1.4));
}

.container {
    text-align: center;
}

.btn {
    border: 2px solid transparent;
    border-radius: .25rem;
    padding: .5rem 1rem;
    font-size: 1.2rem;
    color: var(--btn-color);
    background: var(--btn-bg);
    border-color: var(--btn-border-color);
    cursor: pointer;

&:hover {
        color: var(--btn-hover-color);
        background: var(--btn-hover-bg);
        border-color: var(--btn-hover-border-color);
    }

&:focus {
        color: var(--btn-focus-color);
        background: var(--btn-focus-bg);
        border-color: var(--btn-focus-border-color);
    }
}

Zoom

Document

Container