如何用HTML和CSS制作可跳转外部网站的按钮？<a>标签问题

算力阿峰

2026-8-13

用HTML+CSS实现跳转外部网站的按钮

你遇到的问题核心是没给标签指定完整的外部URL协议头（比如http/https），浏览器会把缺少协议的地址当成站内相对路径处理，自然跳不出去。

直接给你两种可行方案：

方案1：语义化的 标签方案（推荐）

这是最简洁且符合Web标准的做法，只需要给标签加上完整的外部地址，再用CSS改成按钮样式即可。

HTML代码：

<!-- 必须带http/https前缀，target="_blank"是新开窗口打开，rel属性是安全防护 -->
<a href="https://目标网站的完整地址" target="_blank" rel="noopener noreferrer" class="external-button">跳转到外部网站</a>

CSS样式（改成按钮外观）：

.external-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #2563eb;
  color: #fff;
  text-decoration: none; /* 去掉默认下划线 */
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.external-button:hover {
  background-color: #1d4ed8; /* hover时的深色效果 */
}