CSS小球投籃按鈕是一個(gè)很酷的設(shè)計(jì)元素，可以為網(wǎng)頁(yè)添加一些趣味性和互動(dòng)性。下面我們來(lái)看一下如何實(shí)現(xiàn)它。

<!-- HTML代碼 -->
<button class="btn">Shoot</button>
<!-- CSS代碼 -->
.btn {
position: relative;
width: 80px;
height: 80px;
border: none;
background-color: #d6d6d6;
cursor: pointer;
color: #fff;
font-size: 18px;
font-weight: bold;
border-radius: 50%;
outline: none;
transition: all 0.2s ease-in-out;
}
.btn:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 75px;
height: 75px;
border-radius: 50%;
background-color: #fff;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.btn:hover:before {
opacity: 0.5;
}
.btn:active:before {
opacity: 1;
transform: scale(1.5);
}
.btn:active {
transform: translateY(3px);
}

以上就是實(shí)現(xiàn)CSS小球投籃按鈕的代碼，通過(guò)設(shè)置按鈕的before偽元素，我們可以實(shí)現(xiàn)按鈕下方有一個(gè)白色的小球，當(dāng)鼠標(biāo)懸浮在按鈕上時(shí)，小球會(huì)半透明顯示，當(dāng)點(diǎn)擊按鈕時(shí)，小球會(huì)放大變亮，同時(shí)按鈕會(huì)有一個(gè)下移的動(dòng)作。