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; /*鼠标点击颜色*/
}

以上就是制作一个搜索按钮的详细步骤，希望对大家有所帮助。