如何创建像链接一样的HTML按钮？

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

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

当前回答

只需将按钮放在参考标签内。，

<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由您自己的连接决定，因此显然它不等于我的连接。

我似乎在陈述一些非常基本的观点，但我只想尽可能地解释清楚。

2018-08-03 10:05:30

其他回答

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＞元素允许子级。

2010-05-25 16:40:49

随着其他一些人的添加，您可以使用一个简单的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>

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

2013-12-03 05:09:21

我在一个我目前正在开发的网站上使用了这个，效果很好！如果你也想要一些很酷的样式，我会把CSS放在这里。

输入[类型=“提交”]{背景色：白色；宽度：200px；边框：3px实心#c9c9c9；字体大小：24pt；边距：5px；颜色：#969696；}input[type=“submit”]：悬停{颜色：白色；背景色：#969696；过渡：颜色0.2s 0.05s容易；过渡：背景色0.2s 0.05s轻松；光标：指针；}<input type=“submit”name=“submit”onClick=“window.location=”http://example.com'">

一个正在工作的JSFiddle在这里。

2014-11-16 01:39:53

在浏览器控制台中键入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>

2019-07-02 09:05:39

如果您使用的是CSS库或主题，只需将按钮的类应用于锚/链接标记即可。

以下是一个UI示例：

<a class="btn-block-option" href="">
    <i class="si si-reload"></i>
</a>

2020-05-28 17:07:46

如何创建像链接一样的HTML按钮？

推荐文章

最新文章

标签