CSS是一種可以用來美化網(wǎng)頁的語言,它擁有許多強(qiáng)大的功能,其中之一就是可以設(shè)計(jì)非常好看的按鈕組。
.btn-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btn {
display: inline-block;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #3498db;
transition: all 0.3s ease;
}
.btn:hover {
transform: translateY(-5px);
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
以上就是一個(gè)簡單的按鈕組代碼,它包含了一個(gè)按鈕組容器和多個(gè)按鈕,每個(gè)按鈕都擁有自己的樣式。
容器使用了`flex`布局,使得按鈕在一行內(nèi)自動換行,并且水平居中。每個(gè)按鈕都是一個(gè)`inline-block`元素,并且設(shè)置了適當(dāng)?shù)腵padding`、`margin`、`border-radius`、`font-size`、`font-weight`等屬性,以使按鈕看起來更加美觀。
按鈕的顏色使用了藍(lán)色系,并且設(shè)置了鼠標(biāo)懸停時(shí)的特效,包括向上移動和陰影效果,使得按鈕在交互中更加生動。
使用這個(gè)按鈕組代碼,您可以輕松地創(chuàng)建自己的漂亮按鈕組,為您的網(wǎng)站添加更多的美感。