请求协助重新设计关闭按钮与信息按钮（附样式参考及代码）

我来帮你把这两个按钮改成目标的横幅样式，咱们一步步来调整结构和样式，完美匹配你想要的效果：

1. 微调HTML结构（让布局更易控制） #

当前的HTML基础没问题，我新增一个容器来统一管理右侧的两个按钮，这样布局调整会更灵活：

<div id="main">
  <div class="nanoSaturnBanner">
    <div class="banner-buttons">
      <span class="adsByNano">Ads by Nano</span>
      <div class="banner-actions">
        <a class="infoLink" href="http://nanointeractive.com/privacy" target="_blank">
          <i class="fas fa-info-circle"></i>
        </a>
        <div class="closeBtn" onclick="removeHeader()">
          <i class="far fa-window-close"></i>
        </div>
      </div>
    </div>
  </div>
</div>

2. 重写CSS样式，匹配目标效果 #

替换你原有的CSS代码为以下内容，每一步调整都贴合目标样式的特点：

/* 全局基础样式（可根据你的页面实际情况调整） */
body {
  margin: 0; /* 去掉默认margin，避免横幅错位 */
  font-family: Arial, sans-serif;
}

/* 横幅容器：设置深色背景，确保按钮栏在横幅右侧 */
.nanoSaturnBanner {
  background-color: #2d2d2d; /* 对应目标样式的深色背景，可按需修改 */
  padding: 8px 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 按钮栏主容器：用Flex实现文字和按钮组的对齐 */
.banner-buttons {
  display: flex;
  align-items: center;
  gap: 16px; /* 文字和按钮组之间的间距 */
  font-size: 14px;
}

/* "Ads by Nano" 文字样式：设置白色字体匹配目标效果 */
.adsByNano {
  color: #fff;
}

/* 右侧按钮组容器：统一管理两个图标按钮 */
.banner-actions {
  display: flex;
  gap: 12px; /* 两个按钮之间的间距 */
}

/* 信息按钮样式 */
.infoLink {
  color: #fff; /* 默认白色图标 */
  text-decoration: none;
  transition: color 0.2s ease; /* hover时的平滑过渡效果 */
}

.infoLink:hover {
  color: #d075f4; /* hover时切换为你指定的紫色 */
}

/* 关闭按钮样式 */
.closeBtn {
  color: #fff; /* 默认白色图标 */
  cursor: pointer;
  transition: color 0.2s ease;
}

.closeBtn:hover {
  color: #d075f4; /* hover时切换为你指定的紫色 */
}

关键调整说明： #

• 布局升级：用Flexbox替代原有的float布局，对齐和间距控制更灵活，响应式表现也更好
• 颜色匹配：设置深色背景+白色图标/文字，hover时切换为你指定的紫色#d075f4，完全贴合目标样式
• 交互优化：添加过渡动画，让hover颜色变化更自然流畅
• 结构清晰：新增的.banner-actions容器让按钮组的维护和后续调整更方便

3. 确保图标正常显示 #

要让<i>标签里的Font Awesome图标正常显示，你需要确保页面中已经正确加载了Font Awesome字体库。

这样调整后，按钮的样式就会和你想要的横幅按钮效果完全一致了，如果需要微调颜色、间距或者背景色，直接修改CSS里的对应值就行~

内容的提问来源于stack exchange，提问作者James Delaney