如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
如果您使用的是CSS库或主题,只需将按钮的类应用于锚/链接标记即可。
以下是一个UI示例:
<a class="btn-block-option" href="">
<i class="si si-reload"></i>
</a>
其他回答
实现这一点的唯一方法(除了BalusC巧妙的表单想法!)是向按钮添加JavaScript onclick事件,这对可访问性不利。
您是否考虑过将普通链接设置为按钮样式?你不能用这种方式实现特定于操作系统的按钮,但这仍然是最好的IMO方式。
如果您使用的是内部表单,请将属性type=“reset”与按钮元素一起添加。它将阻止表单动作。
<button type="reset" onclick="location.href='http://www.example.com'">
www.example.com
</button>
创建一个充当链接的按钮是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。
还可以使用按钮:
例如,在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>
它实际上非常简单,不使用任何表单元素。您可以只使用<a>标签,里面有一个按钮:)。
这样地:
<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>
它会将href加载到同一页面中。想要新页面吗?只需使用target=“_blank”。
EDIT
几年后,虽然我的解决方案仍然有效,但请记住,您可以使用大量CSS来使它看起来像您想要的那样。这只是一条捷径。