如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
如果您想创建一个充当链接的按钮,有多种方法可以实现。选择最适合您情况的。下面的代码在按钮内创建一个链接。
<按钮><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 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;}
我在这里创建了一个演示。
请记住,规范中说这是无效的,因为按钮不应包含任何交互式后代。
创建一个充当链接的按钮是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。
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(无表单提交),无CSS,无JS:
<a href="/link"><button>Link</button></a>