html好看的搜索框和按钮

HTML本身并不直接提供视觉效果美化功能，但是你可以通过CSS和一些HTML5的属性以及外部库来创建美观的搜索框和按钮。以下是一个简单的例子：

<!-- 搜索框 -->
<input type="text" class="search-input" placeholder="请输入搜索内容">

<!-- 按钮 -->
<button class="search-button">搜索</button>

<style>
.search-input {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.search-button {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.search-button:hover {
  background-color: #0056b3;
}
</style>

在这个例子中，`input`标签用于创建搜索框，`.search-input`类为其添加了基本样式如输入框大小、边框和内边距。`button`标签用于创建按钮，`.search-button`类设置了其背景颜色、文本颜色等，并添加了鼠标悬停时的渐变效果。

如果你想获得更复杂的外观，可以考虑使用Bootstrap、Materialize CSS这样的前端框架，它们提供了大量的预设样式和组件，包括定制化的搜索框和按钮。