Categoría: HTML5

* {
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}
body {
    background: linear-gradient(318.32deg, #C3D1E4 0%, #DDE7F3 55%, #D4E0ED 100%);
    display: grid;
    place-items: center;
}
.btns-wrapper {
    display: grid;
    grid-auto-flow: column;
    padding: 16px;
    gap: 24px;
}
.btn {
    width: 62px;
    height: 62px;
    position: relative;
    border-radius: 18px;
    padding: 2px;
    box-shadow: 4px 2px 16px rgba(136, 165, 191, 0.48), -4px -2px 16px #FFFFFF;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    .inner-wrapper {
        width: 100%;
        height: 100%;
        border-radius: 16px;
        transition: all .2s ease-in-out;
        display: grid;
        place-items: center;
        i {
            user-select: none;
            transition: all .2s ease-in-out;
            font-size: 32px;
            position: relative;
            color: rgba(201, 215, 230, 0.8);
            text-shadow: 2px 2px 2px #d6e1ef99, 0 0 0 #000, 2px 2px 2px #d6e1ef00;
        }
    }
}
.btn.active {
    .inner-wrapper {
        box-shadow: inset 3px 3px 7px rgba(136, 165, 191, 0.48), inset -3px -3px 7px #FFFFFF;
        i {
            text-shadow: 1px 1px 1px #d6e1ef99, 0 0 0 #000, 1px 1px 1px #d6e1ef00;
        }
    }
}

const btns = document.querySelectorAll('.btn');

for (let btn of btns) {
	btn.onclick = () => btn.classList.toggle('active');
}