사용자:Hsl0/vector.css

#buttons {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 10;
    
    display: flex;
    contain: content;
    
    background: color-mix(in srgb,var(--site-background),#ffffffcc 95%);
    backdrop-filter: var(--blur);
    
    box-shadow: #00000030 0px 0px 15px 0px;
    border-radius: var(--radius);
}

#buttons > button {
    display: block;
    height: 2.5em;
    width: 2.5em;
    
    background: none;
    border: none;
    
    font-size: 20px;
    cursor: pointer;
    
    transition: filter 250ms ease, box-shadow 250ms ease-out;
    
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
#buttons > button:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}
#buttons > button:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}
#buttons > button:active {
    filter: blur(1px);
    box-shadow: #00000000 0 0, inset #00000030 0px 0px 8px 0px;
}
#buttons > button:hover:not(:active) {
    box-shadow: #00000030 0px 0px 15px 0px, inset #00000000 0 0;
}