使用按钮而不是 href [重复]答案

【问题标题】：Using a Button instead of href [duplicate]使用按钮而不是 href [重复]
【发布时间】：2015-11-19 22:15:12
【问题描述】：

我必须在我的网页上创建几个按钮来打开我的项目之外的网页。

目前我使用

<a href="http://www.yahoo.com" target="_blank"><span>Go to Yahoo</span></a>
<a href="http://www.google.com" target="_blank"><span>Go to Google</span></a>
<a href="http://www.msn.com" target="_blank"><span>Go to MSN</span></a>

这些创建一个链接而不是一个按钮。有没有办法可以使用按钮？我希望链接在另一个选项卡/窗口而不是同一窗口中打开。

【问题讨论】：

使用 css 设置它们的样式，使其看起来像按钮。
How to create an HTML button that acts like a link?
使用<input type="button" onclick="location: http://www.google.com">这样的按钮有问题吗？
@J.C.这不是一个实际的链接，<input> 元素属于表单。
我想让链接在另一个标签页中打开，而不是同一个标签页

标签： javascript c# html asp.net-mvc

【解决方案1】：

那里有很多 CSS 按钮生成器。试试这个网站：http://www.bestcssbuttongenerator.com/

将 html 更改为： ..

参见jsFiddle 示例

<a href="http://www.yahoo.com" target="_blank" class='myButton'>Go to Yahoo</a>
<a href="http://www.google.com" target="_blank" class='myButton'>Go to Google</a>
<a href="http://www.msn.com" target="_blank" class='myButton'>Go to MSN</a>

CSS：

.myButton {
    -moz-box-shadow: 3px 4px 0px 0px #899599;
    -webkit-box-shadow: 3px 4px 0px 0px #899599;
    box-shadow: 3px 4px 0px 0px #899599;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
    background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
    background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
    background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
    background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
    background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba', GradientType=0);
    background-color:#ededed;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    border:1px solid #d6bcd6;
    display:inline-block;
    cursor:pointer;
    color:#3a8a9e;
    font-family:Arial;
    font-size:17px;
    padding:7px 25px;
    text-decoration:none;
    text-shadow:0px 1px 0px #e1e2ed;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
    background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
    background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
    background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
    background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
    background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed', GradientType=0);
    background-color:#bab1ba;
}
.myButton:active {
    position:relative;
    top:1px;
}

【讨论】：