如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
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>元素允许子级。
其他回答
对于HTML 5和带有图像背景的样式按钮
<a id=“Navigate”href=“http://www.google.com"><输入type=“按钮”id=“导航按钮”style=“背景图像:url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);背景重复:无重复;背景位置:-272px-112px;光标:指针;高度:40px;宽度:40px;边框半径:26px;边框样式:实心;边框颜色:#000;边框宽度:3px;“title=”导航“/></a>
<button onclick=“location.href='http://www.example.com'“type=”按钮“>www.example.com</button>
请注意,type=“button”属性很重要,因为它缺少的默认值是SubmitButton状态。
只需将按钮放在参考标签内。,
<a href="https://www.google.com/"><button>Next</button></a>
这似乎非常适合我,并且没有添加任何%20标签到链接中,只是你想要的。我使用了一个到谷歌的链接来演示。
当然,您可以将其包装在表单标记中,但这不是必需的。
当链接另一个本地文件时,只需将其放在同一文件夹中并添加文件名作为引用即可。如果不在同一文件夹中,请指定文件的位置。
<a href="myOtherFile"><button>Next</button></a>
这也不会在URL的结尾添加任何字符,但在以文件名结尾之前,它确实将文件项目路径作为URL。例如
如果我的项目结构是。。。
..表示文件夹\
表示文件而四|表示父文件夹中的子目录或文件
平民的|||| ..html格式|||||||-main.html|||||||-ssecondary.html
如果我打开main.html文件,
http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah
然而,当我单击main.html中的按钮以更改为secondary.html时,URL将是,
http://localhost:0000/public/html/secondary.html
URL末尾不包含特殊字符。
顺便说一句-(%20表示URL中的一个空格,它编码并插入到它们的位置。)
注意:localhost:0000显然不是0000。您将有自己的端口号。
此外_ijt=xxxxxxxxxxxxxx在main.html URL的末尾,x由您自己的连接决定,因此显然它不等于我的连接。
我似乎在陈述一些非常基本的观点,但我只想尽可能地解释清楚。
如果你需要的是它看起来像一个按钮,重点放在渐变图像上,你可以这样做:
<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>
使用<a>标记创建一个按钮并添加适当的CSS内容:
.邻接{背景:#bada55;填充:5px;边界半径:5px;过渡:1s;文本装饰:无;颜色:黑色;}.attatton:悬停{background:#2a2;}<a href=“https://example.com“class=”abutton“>继续</a>