css中搜索按钮图标

搜索按钮图标在CSS中是一个非常常见的元素，可以帮助网站或应用增加交互性和美观性。以下是一些有关制作搜索按钮图标的CSS代码技巧。

/* 使用伪元素制作一个带圆角的矩形 */
.button {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  border: none;
  background-color: #1E90FF; /* 蓝色 */
  color: white;
  position: relative;
}

.button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
}

/* 将上面的圆点改成一个放大镜图标 */
.button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  mask-image: url("search.svg");
  mask-size: 100%;
  mask-position: center;
  mask-repeat: no-repeat;
}

/* 也可以使用图片为按钮添加图标，例如： */
.button {
  background-image: url("search-icon.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding-left: 30px;
} 

以上是一些简单的示例，您可以根据自己的需要和喜好调整按钮样式和图标。同时也需要注意浏览器兼容性和性能问题。