Продвинутый вариант

<div>
        <label>Color:</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>
        <br><br>
        <label>Shape:</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>
	    <br><br>
		<label for="border-checkbox">Border:</label>
        <input type="checkbox" id="border-checkbox">
        <br><br>
        <label for="background-checkbox">Background:</label>
        <input type="checkbox" id="background-checkbox">
    </div>
    <div id="preview" class="shape circle" style="background-color: blue;"></div>

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;
			width: 150px;
}
.rectangle {
    border-radius: 0;
    width: 150px;
}
.color-button {
    position: relative;
    background-color: white;
    color: black;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.color-button:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
}

.color-button.active {
    background-color: rgb(94, 94, 255);
    color: white;
}

.color-button.active:hover {
    background-color: rgb(94, 94, 255);
    color: white;
}

.color-button.active:hover:after {
    background-color: darkblue;
}
.shape-button {
    position: relative;
    background-color: white;
    color: black;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.shape-button:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
}

.shape-button.active {
    background-color: rgb(94, 94, 255);
    color: white;
}

.shape-button.active:hover {
    background-color: rgb(94, 94, 255);
    color: white;
}

.shape-button.active:hover:after {
    background-color: darkblue;
}

Results:

Color:

Shape:

Border:

Background: