如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。

我希望它是可访问的,并且在URL中使用最少的额外字符或参数。


当前回答

如果您想避免使用表单或输入,并且您正在寻找一个看起来像按钮的链接,那么可以使用div包装器、锚点和h1标记创建好看的按钮链接。您可能希望这样做,以便您可以在页面周围自由放置链接按钮。这对于水平居中的按钮和在其中具有垂直居中的文本特别有用。以下是操作方法:

按钮将由三个嵌套部分组成:div包装器、锚点和h1,如下所示:

.link按钮包装{宽度:200px;高度:40px;方框阴影:插入0px 1px 0px 0px#ffffff;边界半径:4px;背景色:#097BC0;方框阴影:0px 2px 4px灰色;显示:块;边框:1px实心#094BC0;}.link按钮包装器>a{显示:内联表;光标:指针;文本装饰:无;高度:100%;宽度:100%;}.link按钮包装器>a>h1{边距:0自动;显示:表格单元格;垂直对齐:中间;颜色:#f7f8f8;字体大小:18px;字体系列:cabinregular;文本对齐:居中;}<div class=“link button wrapper”><a href=“your/link/此处”><h1>按钮</h1></a></div>

这里有一个jsFiddle,可以查看它并玩它。

此设置的优点:1.使div包装显示:块易于居中(使用margin:0auto)和定位(而<a>是内联的,更难定位,不可能居中)。

您可以只制作<a>显示:块,移动它,并将其设置为按钮样式,但随后垂直对齐其中的文本会变得困难。这允许您创建<a>display:inline表格和<h1>display:table单元格,这允许您在<h1’上使用垂直对齐:middle并垂直居中(这在按钮上总是很好的)。是的,你可以使用填充,但如果你想让你的按钮动态调整大小,那就不那么干净了。有时,当您在div中嵌入<a>时,只有文本是可单击的,这种设置使整个按钮都可单击。如果您只是想移动到另一页,则不必处理表单。表格是用来输入信息的,应该为此保留。允许您干净地将按钮样式和文本样式彼此分离(拉伸优势?当然,但CSS可能看起来很难看,所以分解它很好)。

它确实让我的生活变得更轻松,为可变大小的屏幕设计移动网站。

其他回答

它实际上非常简单,不使用任何表单元素。您可以只使用<a>标签,里面有一个按钮:)。

这样地:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

它会将href加载到同一页面中。想要新页面吗?只需使用target=“_blank”。

EDIT

几年后,虽然我的解决方案仍然有效,但请记住,您可以使用大量CSS来使它看起来像您想要的那样。这只是一条捷径。

另一个选项是在按钮中创建链接:

<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并按Enter键。然后,您可以清楚地知道位置包含:

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "https://stackoverflow.com/questions/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

您可以从这里设置任何值。

因此,对于重定向另一个页面,可以使用链接设置href值。

   window.location.href = your link

在您的案例中:

   <button onclick="window.location.href='www.google.com'">Google</button>

使用<a>标记创建一个按钮并添加适当的CSS内容:

.邻接{背景:#bada55;填充:5px;边界半径:5px;过渡:1s;文本装饰:无;颜色:黑色;}.attatton:悬停{background:#2a2;}<a href=“https://example.com“class=”abutton“>继续</a>

随着其他一些人的添加,您可以使用一个简单的CSS类,不使用PHP,不使用jQuery代码,只使用简单的HTML和CSS。

创建一个CSS类并将其添加到锚点中。代码如下。

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}
<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

就是这样。这很容易做到,让你随心所欲地发挥创造力。您可以控制颜色、大小、形状(半径)等。有关详细信息,请参阅我在网站上找到的。