如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
您可以使用JavaScript:
<html><button onclick='window.location=“http://www.google.com"'>谷歌</按钮></html>
代替http://www.google.com并确保在URL之前包含http://。
其他回答
还可以使用按钮:
例如,在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 href=“www.google.com”>转到谷歌</a></按钮>
第二种方法是在单击按钮时打开一个新窗口
<button onclick=“open('ww.google.com')”>google</button>
或者添加事件侦听器
document.querySelector(“#btn”).addEventListener('click',打开('ww.google.com'))<button id=“btn”>转到Google</button>
有很多方法可以做到这一点,但这只是按钮的三个小例子,它们起到了链接的作用。换句话说,打开链接的按钮。
您可以使用JavaScript:
<html><button onclick='window.location=“http://www.google.com"'>谷歌</按钮></html>
代替http://www.google.com并确保在URL之前包含http://。
在<button></button>上使用<a></a>属性回答的人很有帮助。
但最近,我在<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按钮生成器
然后用一个以您所创建的CSS样式命名的类标记创建链接:
<a href='link.php' class='btn-style'>Link</a>
这是一把小提琴:
JSFiddle公司
另一个选项是在按钮中创建链接:
<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;}
我在这里创建了一个演示。
请记住,规范中说这是无效的,因为按钮不应包含任何交互式后代。