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

如何创建像链接一样的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可能看起来很难看，所以分解它很好）。

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

2014-08-13 03:49:36

其他回答

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

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

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

2020-06-28 11:11:46

还可以使用按钮：

例如，在ASP.NET Core语法中：

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>

2016-11-21 13:07:00

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

推荐文章

最新文章

标签