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

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


当前回答

如果要创建用于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;
}

其他回答

如果要创建用于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;
}

如果您想避免使用表单或输入,并且您正在寻找一个看起来像按钮的链接,那么可以使用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 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由您自己的连接决定,因此显然它不等于我的连接。

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

Use:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

不幸的是,这种标记在HTML5中不再有效,既不能验证,也不能始终按预期工作。使用另一种方法。

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