CSS如何畫搜索按鈕？

/*樣式*/
.btn-search {
display: block;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background-color: #e6e6e6;
background-image: url(搜索圖標路徑);
background-size: 60%;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.btn-search:hover {
background-color: #d5d5d5;
}
.btn-search:active {
background-color: #c4c4c4;
}

通過上述樣式，我們可以制作一個簡單的搜索按鈕，可以加入你的網頁或App中使用。其中，以下是樣式的詳細解釋：

.btn-search {
display: block; /*顯示為塊元素，使其能獨占一行*/
width: 40px;
height: 40px;
border: none; /*去掉邊框*/
border-radius: 50%; /*設置為圓角*/
background-color: #e6e6e6; /*設置背景顏色*/
background-image: url(搜索圖標路徑); /*添加圖標*/
background-size: 60%; /*設置圖標大小*/
background-repeat: no-repeat; /*不重復*/
background-position: center; /*圖標居中*/
cursor: pointer; /*鼠標移動到按鈕上時，變成手形*/
}
.btn-search:hover {
background-color: #d5d5d5; /*鼠標懸停顏色*/
}
.btn-search:active {
background-color: #c4c4c4; /*鼠標點擊顏色*/
}

以上就是制作一個搜索按鈕的詳細步驟，希望對大家有所幫助。