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

是否有人知道我可以如何放置多个HTML按钮，作为链接在同一个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>

来源

2015-01-11 Just Chill Inc

嗯...这样的。尽管如果你想链接和CSS，如果你想让它们看起来像按钮，你应该使用链接。 – Quentin

您可以使用''标签。 –

Duplicate http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link?rq=1 – GolezTrol

没有风格的辉煌，但你的想法......任何一类按钮的标签将样式相同。

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

 
}

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

来源

2015-01-11 14:56:22 Billy

你做的方式已经是不错的。这里有一些其他的方法来做到这一点：

随着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的（几乎每个人都已经启用它，所以这不是一个大问题）

来源

2015-01-11 15:02:26 maxkl

来源：

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

来源

2017-03-23 08:44:03

如果您不想复制和粘贴相同的链接，则可以创建多个链接。

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

来源

2017-09-04 05:51:52

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

回答

相关问题