изменение свойств элементов

<div>
        <label><p><strong>select a color:</strong>.</p></label><br>
        <button id="blue-button" class="color-button">Blue</button>
        <button id="red-button" class="color-button">Red</button>
        <button id="green-button" class="color-button">Green</button>
        <button id="yellow-button" class="color-button">Yellow</button>
        <button id="black-button" class="color-button">Black</button>

<label><p><strong>select a shape:</strong>.</p></label><br>
        <button id="circle-button" class="shape-button">Circle</button>
        <button id="square-button" class="shape-button">Square</button>
        <button id="pill-button" class="shape-button">Pill</button>
        <button id="rectangle-button" class="shape-button">Rectangle</button>

<label><p><strong>customize:</strong>.</p></label><br>

<button id="background-checkbox" class="option-button">Background</button>

<button id="border-checkbox" class="option-button">Border</button>

</div>

const colorButtons = document.getElementsByClassName("color-button");
       const shapeButtons = document.getElementsByClassName("shape-button");
       const backgroundButton = document.getElementById("background-checkbox");
       const borderButton = document.getElementById("border-checkbox");
       const preview = document.getElementById("preview");

let currentColor = "blue";
       let activeButton;

for (let i = 0; i < colorButtons.length; i++) {
           colorButtons[i].addEventListener("click", function() {
               if (activeButton) {
                   activeButton.classList.remove('active');
               }
               this.classList.add('active');
               activeButton = this;
               currentColor = this.innerHTML.toLowerCase();
               preview.style.backgroundColor = currentColor;
           });
       }

for (let i = 0; i < shapeButtons.length; i++) {
           shapeButtons[i].addEventListener("click", function() {
               preview.className = "shape " + this.innerHTML.toLowerCase();
           });
       }

backgroundButton.addEventListener("click", function() {
           if (this.classList.contains('active')) {
               this.classList.remove('active');
               preview.style.visibility = "visible";
               preview.style.border = "none";
           } else {
               this.classList.add('active');
               preview.style.visibility = "hidden";
               preview.style.border = "1px solid black";
           }
       });

borderButton.addEventListener("click", function() {
           if (this.classList.contains('active')) {
               this.classList.remove('active');
               preview.style.border = "0px solid white";
           } else {
               this.classList.add('active');
               preview.style.border = "8px solid white";
           }
       });

let activeShapeButton;

for (let i = 0; i < shapeButtons.length; i++) {
           shapeButtons[i].addEventListener("click", function() {
               if (activeShapeButton) {
                   activeShapeButton.classList.remove('active');
               }
               this.classList.add('active');
               activeShapeButton = this;
               preview.className = "shape " + this.innerHTML.toLowerCase();
           });
       }

body {
            background-color: rgb(164, 164, 164);
        }
        .shape {
            width: 100px;
            height: 100px;
            margin: 10px;
        }
        .circle {
            border-radius: 50%;
        }
        .square {
            border-radius: 0;
        }
        .pill {
            border-radius: 50px;
        }
        .rectangle {
            border-radius: 0;
            width: 150px;
        }
        .color-button, .shape-button, .option-button {
            position: relative;
            background-color: white;
            color: black;
            padding: 10px 20px;
            border: 1px solid black;
            cursor: pointer;
        }
        .color-button::after, .shape-button::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 10px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: black;
            transform: translateY(-50%);
        }
        .option-button.active::after {
            content: '✔';
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
        }
        .color-button.active, .shape-button.active, .option-button.active {
            background-color: rgb(94, 94, 255);
        }
        .color-button.active:hover, .shape-button.active:hover, .option-button.active:hover {
            background-color: rgb(94, 94, 255);
            color: white;
        }

Results:

select a color:.

select a shape:.

customize:.