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

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

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

当前回答

对于HTML 5和带有图像背景的样式按钮

2014-09-24 22:30:08

其他回答

使用＜a＞标记创建一个按钮并添加适当的CSS内容：

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

2020-06-28 11:11:46

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

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

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

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

请记住，规范中说这是无效的，因为按钮不应包含任何交互式后代。

2014-01-16 04:28:47

七种方法：

使用window.location.href='URL'使用window.location.replace（'URL'）使用window.location=“URL”使用window.open（“URL”）使用window.location.assign（'URL'）使用HTML表单使用HTML定位标记

<button onclick='window.location.href=“https://stackoverflow.com"'>单击我</按钮><button onclick='窗口位置替换（“https://stackoverflow.com")'>单击我</按钮><button onclick='window.location=“https://stackoverflow.com"'>单击我</按钮><button onclick='窗口打开（“https://stackoverflow.com“，”_self“，”“，”）'>单击我</按钮><button onclick='窗口位置分配（“http://www.stackoverflow.com")'>单击我</按钮><表单操作='https://stackoverflow.com'方法='get'><input-type='submit'value='Click-Me'/></form><a href='https://stackoverflow.com'><button>单击我</button></a>

2019-03-27 18:21:17

创建一个充当链接的按钮是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。

2022-12-11 09:27:22

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

推荐文章

最新文章

标签