如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。

我希望它是可访问的,并且在URL中使用最少的额外字符或参数。


当前回答

Bootstrap方法也适用于Bulma。

<link rel=“stylesheet”href=“https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css“><a href=“https://www.stackoverflow.com“class=”button is primary“>堆栈溢出</a>

其他回答

另一个选项是在按钮中创建链接:

<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;}

我在这里创建了一个演示。

请记住,规范中说这是无效的,因为按钮不应包含任何交互式后代。

HTML回答:如果您想创建一个HTML按钮,该按钮的作用类似于链接,请使用两个常用属性:<a>和/或action=“”:

<form action="stackoverflow.com"/>
   <button type="submit" value="Submit Form"

“href”是<a>属性的一部分。它有助于直接链接:

<a href=“stackoverflow.com”>href</a>

如果您在基本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">

引导(v4)示例外观:

引导(v3)示例外观:

引导(v2)示例外观:

您可以简单地在元素周围放置标记:

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

https://jsfiddle.net/hj6gob8b/

创建一个充当链接的按钮是HTML设计者需要考虑的一项要求。最被接受的答案是使用表单中的按钮,不幸的是,有时只会在当前窗口中加载新链接-如果这是在电子邮件中,情况会很糟糕。

其他人提出JS、Bootstraps、CSS Styles等可能不可用或不允许。假设一个用例像电子邮件中的一个链接来确认它,并且你没有一个设计完整的基于html的电子邮件模板。您可以简单地使用链接,但添加一些内联样式,如下所示:

$htmlLink = 'https://stackoverflow.com/questions/2906582/';
"<a target='_blank' href='". $htmlLink ."' style='color: purple; font-size: 24px; font-weight: bold; border:2px purple solid; text-decoration: none;'>View This Answer</a>"

引号已经设置好,如果要在电子邮件标记中作为一行,可以在两端用点(.)连接。这只会使文本变大,周围有边框;不是很好,但保证不会像前面所说的那样加载页面。在解析文本和变量时假设Php。