帮我写一个打开显示太阳图案 关闭显示月亮图案的按钮 变化的时候有渐变效果

以下是一个简单的HTML和CSS代码示例，用于实现打开显示太阳图案，关闭显示月亮图案的按钮，并具有渐变效果：

HTML代码：

<button id="toggle-button">切换</button>

CSS代码：

#toggle-button {
  background-color: #FFC107; /* 初始背景颜色（太阳） */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 20px;
  cursor: pointer;
  transition: background-color 0.5s ease; /* 渐变效果 */
}

#toggle-button.moon {
  background-color: #9E9E9E; /* 切换后的背景颜色（月亮） */
}

JavaScript代码：

const toggleButton = document.getElementById('toggle-button');

toggleButton.addEventListener('click', function() {
  toggleButton.classList.toggle('moon');
});

这个示例中，我们使用了一个按钮元素，它的初始背景颜色是黄色（太阳图案），没有边框，文本颜色为白色。按钮上有一个文本“切换”，用于表示切换图案的功能。

我们使用CSS中的transition属性来定义渐变效果。在这个例子中，我们使用了0.5秒的过渡时间，并使用了ease函数以使过渡更平缓。

在JavaScript代码中，我们使用addEventListener方法监听按钮的click事件。当用户单击按钮时，我们使用classList.toggle方法来切换按钮的类名。如果按钮的类名为“moon”，则将其背景颜色更改为灰色（月亮图案）。如果按钮没有类名“moon”，则将其背景颜色更改回黄色（太阳图案）。由于我们已经在CSS中定义了过渡效果，因此此更改将产生平滑的渐变效果。