Question

有没有人知道如何在同一个html页面上放置多个充当链接的html按钮？

我目前正在这样做：

<form action="http://justchillinc.wix.com/just-chill">       
    <input type="submit" value="Just Chill">
</form>
<form action="http://google.com">
    <input type="submit" value="Google">
</form>

Answer 1

没有出色的风格，但你明白了......任何带有一类按钮的标签都会有相同的风格。

＆＃13;

.button{
  display:inline-block;
  text-decoration:none;
  color:yellow;
  font-weight:bold;
  min-width:132px;
  min-height:37px;
  border:1px solid black;
  border-radius:12px;
  text-align:center;
  background-color:gray;
  box-shadow:8px 8px 8px gray;
  margin:10px;
  
  }
.button:active{
  background-color:green;
position:relative;
  top:8px;
  left:8px;

}

＆＃13;

<a href="http://google.com" class="button" target="_blank">Link Here</a>
<a href="http://google.com" class="button" target="_blank">Link Here</a>
<a href="http://google.com" class="button" target="_blank">Link Here</a>
<a href="http://google.com" class="button" target="_blank">Link Here</a>

＆＃13;

Answer 2

你这样做的方式已经很好了。以下是其他一些方法：

使用a代码和一些自定义CSS（http://jsfiddle.net/pp4eufat/）

HTML：
```
<a class="button" href="http://justchillinc.wix.com/just-chill">Just chill</a>
```
CSS：
```
a.button {
    padding: 5px 10px;
    background-color: #ddd;
    color: #222;
    text-decoration: none;
}
```
您可以轻松指定按钮类以提交按钮或类似内容，以便在整个页面上获得一致的按钮外观。
使用按钮和javascript（http://jsfiddle.net/gdfx5fd3/）

代码：
```
<button onclick="window.location.href='http://google.com';">Google</button>
```
重要的部分是onclick="location.href='http://google.com';"。它告诉浏览器在用户单击按钮时打开http://google.com。缺点是用户必须启用javascript（几乎所有人都启用了它，所以这不是一个大问题）

Answer 3

自：

<form action="http://justchillinc.wix.com/just-chill">       
    <input type="submit" value="Just Chill">
</form>
<form action="http://google.com">
    <input type="submit" value="Google">
</form>

要：

<form method="post" action="http://justchillinc.wix.com/just-chill">       
    <input type="submit" value="Just Chill">
</form>
<form method="post" action="http://google.com">
    <input type="submit" value="Google">
</form>

Answer 4

如果您不想复制和粘贴相同的链接，这是一种创建多个链接的方法。

<button class= "card" id="card-1">1</button>
<button class= "card" id="card-2">2</button>
<button class= "card" id="card-3">3</button>
<button class= "card" id="card-4">4</button>
<button class= "card" id="card-5">5</button>
<button class= "card" id="card-6">6</button>
<button class= "card" id="card-7">7</button>
<button class= "card" id="card-8">8</button>
<button class= "card" id="card-">9</button>


<script type="text/javascript">
    var elements = document.getElementsByClassName("card");
    for (i = 0; i < elements.length; i ++)
    {
        (function(){
        elements[i].onclick = function () {
        location.href = "https://stackoverflow.com/questions/27888246/how-can-i-place-multiple-html-buttons-that-act-as-links-on-the-same-page#";
        };}());
    };
</script>

如何在同一页面上放置多个充当链接的html按钮？

4 个答案: