如何建立充当连接的HTML按钮？

时间 2019-12-18

标签如何建立充当连接 html 按钮栏目 HTML 繁體版

原文原文链接

我想建立一个相似于连接的HTML按钮。所以，当您单击按钮时，它将重定向到页面。我但愿它尽量地易于访问。 css

我也但愿这样作，所以URL中没有任何多余的字符或参数。 html

我该如何实现？ css3

根据到目前为止发布的答案，我目前正在这样作： web

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

但这是在Safari和Internet Explorer中，它在URL的末尾添加了问号字符。我须要找到一种不会在URL末尾添加任何字符的解决方案。 bootstrap

还有其余两种解决方案：使用JavaScript或设置连接的样式以使其看起来像按钮。框架

使用JavaScript： post

<button onclick="window.location.href='/page2'">Continue</button>

但这显然须要JavaScript，所以，屏幕阅读器没法访问它。连接的重点是转到另外一个页面。所以，试图使按钮像连接同样工做是错误的解决方案。个人建议是，您应该使用连接并设置其样式以使其看起来像一个按钮。网站

<a href="/link/to/page2">Continue</a>

#1楼

若是这是您在基本HTML锚标记中寻找的按钮的外观，则可使用Twitter Bootstrap框架格式化如下任何常见的HTML类型连接/按钮，使其显示为按钮。请注意该框架的版本二、3或4之间的视觉差别： google

<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">

Bootstrap（v4）示例外观： url

Bootstrap（v3）示例外观：

Bootstrap（v2）示例外观：

#2楼

进行如下操做是否有不利之处？

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

其中a.nostyle是具备连接样式（能够摆脱标准连接样式）的类，而span.button是具备“按钮”样式（背景，边框，渐变等）的类。。

#3楼

若是要在任何地方建立用于URL的按钮，请为锚点建立按钮类。

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}

#4楼

再加上其余一些功能，只需使用一个简单的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>

这就对了。这很容易作到，而且可让您发挥本身的创造力。您能够控制颜色，大小，形状（半径）等。有关更多详细信息，请参见我在上找到的网站。

#5楼

另外一个选择是在按钮中建立一个连接：

<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;}

我在这里建立了一个演示。