如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
如果您使用的是CSS库或主题,只需将按钮的类应用于锚/链接标记即可。
以下是一个UI示例:
<a class="btn-block-option" href="">
<i class="si si-reload"></i>
</a>
其他回答
使用<a>标记创建一个按钮并添加适当的CSS内容:
.邻接{背景:#bada55;填充:5px;边界半径:5px;过渡:1s;文本装饰:无;颜色:黑色;}.attatton:悬停{background:#2a2;}<a href=“https://example.com“class=”abutton“>继续</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;}
我在这里创建了一个演示。
请记住,规范中说这是无效的,因为按钮不应包含任何交互式后代。
七种方法:
使用window.location.href='URL'使用window.location.replace('URL')使用window.location=“URL”使用window.open(“URL”)使用window.location.assign('URL')使用HTML表单使用HTML定位标记
<!-- 使用window.location.href='URL'--><button onclick='window.location.href=“https://stackoverflow.com"'>单击我</按钮><!-- 使用window.location.replace('URL')--><button onclick='窗口位置替换(“https://stackoverflow.com")'>单击我</按钮><!-- 使用window.location=“URL”--><button onclick='window.location=“https://stackoverflow.com"'>单击我</按钮><!-- 使用window.open('URL')--><button onclick='窗口打开(“https://stackoverflow.com“,”_self“,”“,”)'>单击我</按钮><!-- 使用window.location.assign('URL')--><button onclick='窗口位置分配(“http://www.stackoverflow.com")'>单击我</按钮><!-- 使用HTML表单--><表单操作='https://stackoverflow.com'方法='get'><input-type='submit'value='Click-Me'/></form><!-- 使用HTML定位标记--><a href='https://stackoverflow.com'><button>单击我</button></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)示例外观:
还可以使用按钮:
例如,在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>