首页 文章

如何创建一个像链接一样的HTML按钮？

提问于
浏览 次
1497

我想创建一个像按钮一样的HTML按钮 . 因此，当您单击该按钮时，它会重定向到页面 . 我希望它尽可能地易于访问 .

我也喜欢它，所以URL中没有任何额外的字符或参数 .

我怎样才能做到这一点？

根据到目前为止发布的答案，我目前正在这样做：

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

但问题是在Safari和Internet Explorer中，它在URL的末尾添加了一个问号字符 . 我需要找到一个不会在URL末尾添加任何字符的解决方案 .

还有另外两种解决方案：使用JavaScript或样式化链接看起来像一个按钮 .

使用JavaScript：

<button onclick="window.location.href='/page2'">Continue</button>

但这显然需要JavaScript，因此屏幕阅读器不易访问 . 链接的要点是转到另一个页面 . 因此，尝试使按钮像链接一样是错误的解决方案 . 我的建议是你应该使用一个链接和style it to look like a button .

<a href="/link/to/page2">Continue</a>
html button hyperlink anchor htmlbutton

30 回答

  • 18

    For HTML 5 and styled button along with image background

    <a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>
    回复于
  • 3

    您只需在元素周围添加一个标记：

    <a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

    https://jsfiddle.net/hj6gob8b/

    回复于
  • 0

    在 <button></button> 上使用 <a></a> 属性回答的人很有帮助 .

    BUT 然后最近，当我在 <form></form> 中使用链接时遇到了问题 .

    该按钮现在被视为/作为提交按钮（HTML5） . 我试过一种方法，并找到了这种方法 .

    创建一个CSS样式按钮，如下所示：

    .btn-style{
    border : solid 1px #0088cc;
    border-radius : 6px;
    moz-border-radius : 6px;
    -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    font-size : 18px;
    color : #696869;
    padding : 1px 17px;
    background : #eeeeee;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
    background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}

    或者在这里创建一个新的：CSS Button Generator

    然后使用以您制作的CSS样式命名的类标记创建链接：

    <a href='link.php' class='btn-style'>Link</a>

    这是一个小提琴：

    JS Fiddle

    回复于
  • 1697

    这个问题似乎有三种解决方案（都有利有弊） .

    解决方案1：表单中的按钮 .

    <form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

    但问题在于，在某些版本的流行浏览器（如Chrome，Safari和Internet Explorer）中，它会在URL的末尾添加一个问号字符 . 换句话说，对于上面的代码，您的网址最终会如下所示：

    http://someserver/pages2?

    有一种方法可以解决这个问题，但它需要服务器端配置 . 使用 Apache Mod_rewrite 的一个示例是将具有尾随 ? 的所有请求重定向到其没有 ? 的相应URL . 这是一个使用.htaccess的例子，但是有一个完整的线程here：

    RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

    类似的配置可能因Web服务器和使用的堆栈而异 . 所以这个方法的摘要：

    优点：

    • 这是一个真正的按钮，在语义上它是有道理的 .

    • 由于它是一个真正的按钮，它也会像真正的按钮一样（例如，当活动时按空格键时可拖动的行为和/或模仿点击） .

    • 没有JavaScript，不需要复杂的样式 .

    缺点：

    • 尾随 ? 在某些浏览器中看起来很难看 . 这可以通过使用POST而不是GET的hack（在某些情况下）来修复，但干净的方法是使用服务器端重定向 . 服务器端重定向的缺点是，由于304重定向，它将导致对这些链接的额外HTTP调用 .

    • 添加额外的 <form> 元素

    • 使用多个表单时的元素定位可能很棘手，在处理响应式设计时会变得更糟 . 根据元素的顺序，使用此解决方案可能无法实现某些布局 . 如果设计受到这一挑战的影响，最终可能会影响可用性 .

    解决方案2：使用JavaScript .

    您可以使用JavaScript触发onclick和其他事件，以使用按钮模仿链接的行为 . 下面的示例可以改进并从HTML中删除，但它只是为了说明这个想法：

    <button onclick="window.location.href='/page2'">Continue</button>

    优点：

    • 简单（基本要求）并保持语义而不需要额外的表格 .

    • 由于它是一个真正的按钮，它也会像真正的按钮一样（例如，当活动时按空格键时可拖动的行为和/或模仿点击） .

    缺点：

    • 需要JavaScript，这意味着不太容易访问 . 这对于诸如链接之类的基础（核心）元素来说并不理想 .

    解决方案3：锚点（链接）样式像按钮 .

    Styling a link like a button相对简单，可以在不同的浏览器中提供类似的体验 . Bootstrap这样做，但使用简单的样式也很容易实现 .

    优点：

    • 简单（基本要求）和良好的跨浏览器支持 .

    • 不需要 <form> 才能工作 .

    • 不需要JavaScript工作 .

    缺点：

    • 语义有点破碎，因为你想要一个像链接一样的按钮而不是一个像按钮一样的链接 .

    • 它不会重现解＃1的所有行为 . 它不支持与按钮相同的行为 . 例如，链接在拖动时的反应不同 . 如果没有一些额外的JavaScript代码，"space bar"链接触发器也无法工作 . 它会增加很多复杂性，因为浏览器在按钮上支持 keypress 事件的方式不一致 .

    结论

    解决方案＃1（ Button in a form ）似乎最透明适用于需要最少工作量的用户 . 如果您的布局不受此选择的影响且服务器端调整是可行的，那么对于可访问性是最重要的情况（例如错误页面上的链接或错误消息），这是一个很好的选择 .

    如果JavaScript不是您的可访问性要求的障碍，那么解决方案＃2（ JavaScript ）将优先于＃1和＃3 .

    如果出于某种原因，可访问性至关重要（JavaScript不是一个选项），但是您的设计和/或服务器配置阻止您使用选项＃1，那么解决方案＃3（ Anchor styled like a button ）是一个不错的选择以最小的可用性影响解决这个问题 .

    回复于
  • 18

    我知道已经提交了很多答案，但它们似乎都没有真正解决问题 . 以下是我对解决方案的看法：

    • 使用OP开头的 <form method="get"> 方法 . 这非常有效，但它有时会在URL中添加 ? . ? 是主要问题 .

    • 使用jQuery / JavaScript在启用JavaScript时执行以下链接，以便 ? 不会最终附加到URL . 对于没有启用JavaScript的极小部分用户，它将无缝回退到 <form> 方法 .

    • JavaScript代码使用事件委派，因此您可以在 <form> 或 <button> 之前附加事件侦听器 . 我'm using jQuery in this example, because it is quick and easy, but it can be done in '香草'JavaScript也是如此 .

    • JavaScript代码阻止发生默认操作，然后遵循 <form> action 属性中给出的链接 .

    JSBin示例（代码段不能跟踪链接）

    // Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});

    <!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>
    回复于
  • 12
    <form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>
    回复于
  • 454

    执行此操作的唯一方法（除了BalusC的巧妙形式创意！）是通过向按钮添加JavaScript onclick 事件，这对于可访问性不利 .

    您是否考虑过像按钮这样的普通链接？你无法通过这种方式实现操作系统特定的按钮，但它仍然是IMO的最佳方式 .

    回复于
  • 46

    你也可以使用一个按钮：

    例如，在ASP.NET Core语法中：

    // Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>
    回复于
  • 1

    如果您需要的是它看起来像一个按钮， with emphasis on the gradient image ，您可以这样做：

    <a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>
    回复于
  • 412

    如果你想避免使用表单或输入，并且你正在寻找一个看起来像按钮的链接，你可以使用div包装器，一个锚点和一个 h1 标签创建漂亮的按钮链接 . 你'd potentially want this so you can freely place the link-button around your page. This is especially useful for horizontally centering buttons and having vertically-centered text inside of them. Here'如何：

    你的按钮将由三个嵌套的部分组成：div包装器，一个锚点和一个h1，如下所示：

    <div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

    然后在CSS中，您的样式应如下所示：

    .link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}

    Here's a jsFiddle来检查它并玩它 .

    这种设置的好处：1 . 使div包装器显示：块使其易于居中（使用margin：0 auto）和位置（而<a>是内联的，更难定位且不可能居中） .

    • 你可以只做<a>显示：阻止，移动它，并将其设置为一个按钮，但是然后垂直对齐它内部的文本变得很难 .

    • 这允许你制作<a> display：inline-table和<h1> display：table-cell，它允许你在<h1>上使用vertical-align：middle并垂直居中（这总是很好的在按钮上） . 是的，你可以使用填充，但如果你想让你的按钮动态调整大小，那就不会那么干净了 .

    • 有时当你在div中嵌入<a>时，只有文本是可点击的，这个设置使整个按钮可以点击 .

    • 如果您只是想移动到另一个页面，则无需处理表单 . 表单用于输入信息，应该为此保留 .

    • 允许您干净地将按钮样式和文本样式相互分开（伸展优势？当然，但CSS可能看起来很讨厌，所以分解它很好） .

    它确实让我的生活更轻松，为可变尺寸的屏幕设计移动网站 .

    回复于
  • 5

    您还可以将按钮 type-property 设置为"button"（它使其不提交表单），然后将其嵌套在链接中（使其重定向用户） .

    通过这种方式，您可以在提交表单的同一表单中使用另一个按钮，以备不时之需 . 我也认为在大多数情况下，将表单方法和操作设置为链接是比较好的（除非它是一个搜索表单，我猜...）

    例：

    <form method="POST" action="/SomePath">
    <input type="text" name="somefield"/>
    <a href="www.target.com"><button type="button">Go to Target!</button></a>
    <button type="submit">submit form</button>
</form>

    这样，第一个按钮重定向用户，而第二个按钮提交表单 .

    小心确保按钮不会触发任何操作，因为这会导致冲突 . 同样正如Arius指出的那样，你应该知道，由于上述原因，根据标准，这并不是严格意义上被认为是有效的HTML . 然而，它确实在Firefox和Chrome中正常工作，但我还没有为Internet Explorer测试它 .

    回复于
  • 2

    如果您希望按钮作为下载按钮工作

    <a href="${link}" download><input type="button" id="btnDownload" value="Download Image"></input></a>
    回复于
  • 22

    在 button 标记内使用它作为 data-href="index.html" .

    回复于
  • 8
    <input type = "submit" name = "submit" onClick= "window.location= 'http://example.com'">

    我用它来做我正在研究的网站，效果很好！如果你想要一些很酷的样式，我会把CSS在这里

    input[type = "submit"] {
    background-color:white;
    width:200px;
    border: 3px solid #c9c9c9;
    font-size:24pt;
    margin:5px;
    color:#969696;
}
input[type = "submit"]:hover {
    color: white;
    background-color:#969696;
    transition: color 0.2s 0.05s ease;
    transition: background-color 0.2s 0.05s ease;
    cursor: pointer;
}

    工作JSFiddle here

    回复于
  • 0

    与其他一些人添加的内容一样，你可以使用一个简单的CSS类，没有PHP，没有jQuery代码，只需简单的HTML和CSS .

    创建一个CSS类并将其添加到您的锚点 . 代码如下 .

    .button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

    这就对了 . 这很容易做到，让你像你一样有创意 . 您可以控制颜色，大小，形状（半径）等 . 有关详细信息，请参阅the site I found this on .

    回复于
  • 0

    HTML

    纯HTML方式是将其放在 <form> 中，您可以在 action 属性中指定所需的目标URL .

    <form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

    如有必要，在表单上设置CSS display: inline; ，使其与周围文本保持一致 . 在上面的示例中，您也可以使用 <button type="submit"> 而不是 <input type="submit"> . 唯一的区别是 <button> 元素允许孩子 .

    您可以直观地期望能够使用与 <a> 元素类似的 <button href="http://google.com"> ，但遗憾的是，根据HTML specification，此属性不存在 .

    CSS

    如果允许使用CSS，只需使用 <a> ，您使用appearance属性（only Internet Explorer support is currently (July 2015) still poor）来设置样式，使其看起来像一个按钮 .

    <a href="http://google.com" class="button">Go to Google</a>

    a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

    或者选择其中一个CSS库，如Bootstrap .

    <a href="http://google.com" class="btn btn-default">Go to Google</a>

    JavaScript

    如果允许JavaScript，请设置 window.location.href .

    <input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
    回复于
  • 134

    如果你想重定向你网站中的页面，那么's my method - I' ve将属性href添加到按钮，然后onclick将this.getAttribute（'href'）分配给document.location.href

    **如果您因为“X-Frame-Options”指向“sameorigin”而引用域外网址，则无效 .

    示例代码：

    <button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>
    回复于
  • 36
    <button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>
    回复于
  • 25

    它非常简单，不使用任何表格元素 . 您可以使用带有按钮的<a>标签:) .

    像这样：

    <a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

    它会将href加载到同一页面中 . 想要一个新页面？只需使用 target="_blank" .

    回复于
  • 16

    @ Nicolas，以下为我工作，因为你没有 type="button" 因为它开始表现为提交类型..因为我已经有一个提交类型 . 它没有为我工作....现在你可以添加class to button或 <a> 获取所需的布局：

    <a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>
    回复于
  • 15

    如果您使用的是内部表单，请添加属性 type="reset" 以及按钮元素 . 它会阻止表单操作 .

    <button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>
    回复于
  • 13

    如果要在任何位置创建用于URL的按钮，请为锚点创建按钮类 .

    a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}
    回复于
  • 7

    关于BalusC's reply，

    <form action="http://google.com">
    <input type="submit" value="Go to Google">
</form>

    我需要向按钮添加变量，但不确定如何 . 我最终使用 input type hidden . 我认为这可能对像我这样找到此页面的其他人有所帮助 .

    回复于
  • 2

    使用：

    <a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

    遗憾的是，此标记在HTML5中不再有效，并且既不会验证也不会始终按预期工作 . 使用另一种方法 .

    回复于
  • 1

    做以下事情有什么缺点吗？

    <a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

    a.nostyle 是一个具有链接样式的类（可以摆脱标准链接样式）， span.button 是一个具有"button"样式（背景，边框，渐变等）的类 .

    回复于
  • 100

    另一个选择是在按钮中创建一个链接：

    <button type="button"><a href="yourlink.com">Link link</a></button>

    然后使用CSS来设置链接和按钮的样式，以便链接占据按钮内的整个空间（因此用户不会错过任何一次点击）：

    button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

    我创建了demo here .

    回复于
  • 14

    使用引导程序很容易：

    <a href="#" class="btn btn-default"><span>Button TEXT</span></a>
    回复于
  • 3

    如果它在基本的HTML锚标记中查找，那么您可以使用Twitter Bootstrap框架格式化以下任何常见的HTML类型链接/按钮以显示为按钮 . 请注意框架的第2版，第3版或第4版之间的视觉差异：

    <a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

    Bootstrap (v4)样品外观：

    Sample output of Boostrap v4 buttons

    Bootstrap (v3)样品外观：

    Sample output of Boostrap v3 buttons

    Bootstrap (v2)样品外观：

    Sample output of Boostrap v2 buttons

    回复于
  • 0

    为什么不将您的按钮放在参考标签内，例如

    <a href="https://www.google.com/"><button>Next</button></a>

    这对我来说似乎很有效，并且不会向链接添加任何％20标签，只是你想要它 . 我使用谷歌链接来演示 .

    您当然可以将其包装在表单标签中，但这不是必需的 .

    链接另一个本地文件时，只需将其放在同一文件夹中，然后添加文件名作为引用 . 如果in不在同一文件夹中，请指定文件的位置 .

    <a href="myOtherFile"><button>Next</button></a>

    这不会在URL的末尾添加任何字符，但是在文件名结束之前它确实将文件项目路径作为url . 例如

    如果我的项目结构是...

    ..表示文件夹 - 表示文件，而四个|表示父文件夹中的子目录或文件

    ..上市
    |||| ..html
    |||| |||| -main.html
    |||| |||| -secondary.html

    如果我打开main.html，URL会是，

    http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

    但是，当我单击main.html中的按钮更改为secondary.html时，URL将是，

    http://localhost:0000/public/html/secondary.html

    URL末尾不包含任何特殊字符 . 我希望这有帮助 . 顺便说一句 - （％20表示其编码和插入的URL中的空格代替他们 . ）

    注意：localhost：0000显然不是0000，你将拥有自己的端口号 .

    此外，？_ijt = xxxxxxxxxxxxxx在main.html URL的末尾，x由您自己的连接决定，所以显然不会等于我的 .

    看起来好像我说的是一些非常基本的观点，但我只是想尽可能地解释一下 . 感谢您的阅读，我希望这至少可以帮到某人 . 快乐的编程 .

    回复于
  • 9

    从HTML5开始，按钮支持 formaction 属性 . 最重要的是，不需要Javascript或欺骗 .

    <form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

    Caveats

    • 必须被 <form> 标记包围 .

    • <button> 类型必须是"submit"（或未指定），我无法使用"button."类型，这将在下面提到 .

    • 覆盖表单中的默认操作 . 换句话说，如果你在另一个表单中执行此操作，则会导致冲突 .

    参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction浏览器支持：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility

    回复于

相关问题