To create this kind of functionality — where clicking the big green circle button makes the small circular buttons turn green one by one — you could write something like this in HTML, CSS, and JavaScript. Let me know if you’d like me to put this into a code canvas so it’s easier to tweak!
Here’s a simple approach:
<!DOCTYPE html>
<html>
<head>
<style>
.big-button {
width: 80px;
height: 80px;
background-color: green;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
cursor: pointer;
}
.small-button {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: gray;
display: inline-block;
margin: 5px;
}
.active {
background-color: green;
}
</style>
</head>
<body>
<div class="big-button" onclick="activateButton()">✔</div>
<div id="small-buttons">
<div class="small-button"></div>
<div class="small-button"></div>
<div class="small-button"></div>
</div>
<script>
let currentIndex = 0;
function activateButton() {
const buttons = document.querySelectorAll('.small-button');
if (currentIndex < buttons.length) {
buttons[currentIndex].classList.add('active');
currentIndex++;
}
}
</script>
</body>
</html>
