如何让使用CSS样式的按钮点击后跳转链接在新标签页打开

现有按钮无法跳转的核心原因是代码中window.open调用方式错误：window.open是JavaScript内置方法，需要传参调用，错误将其作为属性赋值会导致点击无响应。

方案1：修正现有button标签的跳转逻辑 #

不需要改动现有CSS，仅修改onclick属性内容即可完全保留按钮样式和动画效果：

<button onclick="window.open('https://www.google.com', '_blank')" class="button" style="vertical-align:middle"><span>GOOGLE</span></button>

参数说明：第二个参数_blank就是指定链接在新标签页打开的标识。

方案2：改用a标签实现（更推荐） #

你之前尝试的a标签方案完全可行，未生效大概率是写反了元素嵌套关系、或者没有清除a标签的默认下划线样式。不需要额外新增.button aCSS规则，直接给a标签添加button类即可，语义更好且无需依赖JavaScript：

<a href="https://www.google.com" target="_blank" class="button" style="vertical-align:middle;text-decoration:none;"><span>GOOGLE</span></a>

额外添加的text-decoration:none是为了清除a标签默认的下划线样式，其余所有按钮样式、hover动画都和原有效果完全一致。如果希望全局去掉a标签按钮的下划线，也可以直接把text-decoration:none加到现有.button类的CSS规则中，不需要每次写行内样式。

内容的提问来源于stack exchange，提问作者Nina Naushad