如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
<button onclick=“location.href='http://www.example.com'“type=”按钮“>www.example.com</button>
请注意,type=“button”属性很重要,因为它缺少的默认值是SubmitButton状态。
其他回答
对于Nicolas的回答,以下内容对我有用,因为该回答没有type=“button”,因此它开始表现为提交类型。。。因为我已经有一个提交类型。这对我不起作用。。。现在,您可以向按钮或<a>添加一个类以获得所需的布局:
<a href="http://www.google.com/">
<button type="button">Click here</button>
</a>
HTML
简单的HTML方式是将其放在一个<form>中,其中在action属性中指定所需的目标URL。
<form action="https://google.com">
<input type="submit" value="Go to Google" />
</form>
如果需要,设置CSS显示:inline;以使其与周围文本保持一致。您也可以使用<button type=“submit”>来代替上面示例中的<input type=“提交”>。唯一的区别是<button>元素允许子级。
您可以直观地期望能够使用<button href=“https://google.com“>类似于<a>元素,但不幸的是,根据HTML规范,该属性不存在。
CSS
如果允许使用CSS,只需使用一个<a>,您可以使用外观属性(这在Internet Explorer中仅不受支持)将其设置为类似按钮。
<a href="https://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="https://google.com" class="btn btn-primary">Go to Google</a>
JavaScript
如果允许JavaScript,请设置window.location.href。
<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />
您也可以使用<button>来代替上面示例中的<input type=“button”>。唯一的区别是<button>元素允许子级。
<form>
<input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'">
</form>
如果您在基本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="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>