如何为自定义样式的HTML Button添加超链接功能

先修正你代码里的结构问题：HTML的<head>应该放在<html>标签内、<body>标签之前，且不能重复定义<body>，冗余的<font>标签也可以用CSS替代。

下面提供两种可行的方案，解决按钮跳转且保留自定义样式的问题：

方案一：将超链接<a>设置为按钮样式 #

这种方法直接用<a>标签实现跳转，同时通过CSS赋予它按钮的外观，整个按钮区域都能响应点击，样式可完全自定义。

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: rgb(48, 45, 45);
        }
        .button {
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .button1 {background-color: #4CAF50;}
        .button2 {background-color: #008CBA;}
    </style>
</head>
<body>
    <!-- 跳转至外部网址 -->
    <a href="https://example.com" class="button button1">Green</a>
    <!-- 跳转至本地文件，比如同目录下的page.html -->
    <a href="page.html" class="button button2">Blue</a>
</body>
</html>

方案二：给<button>添加点击事件实现跳转 #

如果需要保留<button>元素（比如涉及表单操作），可以通过JavaScript点击事件实现跳转：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: rgb(48, 45, 45);
        }
        .button {
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .button1 {background-color: #4CAF50;}
        .button2 {background-color: #008CBA;}
    </style>
</head>
<body>
    <button class="button button1" onclick="window.location.href='https://example.com'">Green</button>
    <button class="button button2" onclick="window.location.href='page.html'">Blue</button>
</body>
</html>

说明 #

• 方案一优势：符合HTML语义，搜索引擎可识别链接，无需额外脚本，兼容性更好。
• 方案二优势：保留按钮原生特性，适合需要在跳转前执行额外逻辑（比如数据验证）的场景。

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