CSS 點擊按鈕數值聯動是一種常用的前端交互效果。它可以幫助用戶快速地調整頁面上的數值，從而獲得更好的用戶體驗。

// HTML 代碼
<div class="wrapper">
<div class="box"></div>
<button class="btn plus">+</button>
<button class="btn minus">-</button>
</div>
// CSS 代碼
.wrapper {
display: flex;
align-items: center;
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 0 20px;
}
.btn {
background-color: blue;
color: #fff;
border: none;
font-size: 24px;
width: 50px;
height: 50px;
cursor: pointer;
}
.plus {
border-radius: 50% 0 0 50%;
}
.minus {
border-radius: 0 50% 50% 0;
}
// JavaScript 代碼
var box = document.querySelector('.box');
var plusBtn = document.querySelector('.plus');
var minusBtn = document.querySelector('.minus');
var value = 0;
plusBtn.addEventListener('click', function() {
value++;
box.style.width = value + 'px';
});
minusBtn.addEventListener('click', function() {
value--;
box.style.width = value + 'px';
});

上面的代碼演示了一個簡單的點擊按鈕數值聯動效果。點擊“+”按鈕可以增加小方塊的寬度，點擊“-”按鈕可以減小小方塊的寬度。

這個效果的實現離不開 CSS 和 JavaScript。CSS 主要負責布局和樣式，JavaScript 主要負責交互邏輯。我們使用 flex 布局來讓小方塊和按鈕在容器中居中對齊。按鈕的樣式使用了背景色、字體顏色、邊框和圓角等屬性，使得它們看起來更加美觀。

JavaScript 則監聽了按鈕的點擊事件。每次點擊按鈕時都會更新數值，并把新的數值應用到小方塊的寬度上。此外，我們在 CSS 中給了“+”按鈕和“-”按鈕不同的圓角，使得它們看起來更像一個整體。