效果1：

<div style="display: flex; justify-content: space-between; gap: 30px; width: 100%;">
<button class="square-button">按钮A</button>
<button class="square-button">按钮B</button>
<button class="square-button">按钮C</button>
<button class="square-button">按钮D</button>
</div>

<style>
.square-button {
flex-grow: 1;
aspect-ratio: 1/1;
background-color: rgba(239, 239, 239, 0.2); /* 背景色透明度 */
【暂停】background-color: #FFF;    /*--- 按钮背景色透明或指定颜色任选一个 --*/
border: 2px solid #EFEFEF;
border-radius: 8px;
overflow: hidden; /* 隐藏超出按钮范围的图片部分 */
}

.square-button:hover {
background-color: #EFEFEF;
}

.square-button img {
transition: transform 0.3s ease; /* 添加过渡效果 */
}

.square-button:hover img {
transform: scale(1.3);
}
</style>