style - html w3school button
如何創建一個像鏈接一樣的HTML按鈕? (18)
我想創建一個類似鏈接的HTML按鈕。 所以,當你點擊按鈕時,它會重定向到一個頁面。 我希望它盡可能地可以訪問。
我也喜歡它,所以URL中沒有任何額外的字符或參數。
我怎樣才能做到這一點?
根據迄今發布的答案,我目前正在這樣做:
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
但問題在於,在Safari和Internet Explorer ,它在URL的末尾添加了一個問號字符。 我需要找到一個解決方案,不會在URL的末尾添加任何字符。
還有其他兩種解決方案可以做到這一點:使用JavaScript或將鏈接樣式化為按鈕。
使用JavaScript:
<button onclick="window.location.href='/page2'">Continue</button>
但是,這顯然需要JavaScript,因此屏幕閱讀器無法訪問。 鏈接的一點是轉到另一頁。 所以試圖讓按鈕像鏈接一樣行事是錯誤的解決方案。 我的建議是,你應該使用一個鏈接並將其設置為一個按鈕 。
<a href="/link/to/page2">Continue</a>
HTML
純HTML方式是將它放在<form>
其中您在action
屬性中指定了所需的目標URL。
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>
如有必要,請設置CSS display: inline;
在形式上保持與周圍文本的流動。 在上面的例子中,不是<input type="submit">
,你也可以使用<button type="submit">
。 唯一的區別是<button>
元素允許孩子。
您可以直觀地預期能夠使用類似於<a>
元素的<button href="http://google.com">
,但不幸的是,根據HTML規範 ,該屬性不存在。
CSS
如果允許使用CSS,只需使用樣式為<a>
外觀類似按鈕的appearance
屬性( 目前僅支持Internet Explorer(2015年7月)仍然很差 )。
<a href="http://google.com" class="button">Go to Google</a>
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
或者選擇一個像Bootstrap這樣的CSS庫。
<a href="http://google.com" class="btn btn-default">Go to Google</a>
JavaScript的
如果允許使用JavaScript,請設置window.location.href
。
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
@尼古拉斯,下面為我工作,因為你沒有type="button"
因為它開始表現為提交類型..因為我已經有一個提交type.it沒有為我工作....現在您可以將類添加到按鈕或<a>
以獲取所需的佈局:
<a href="http://www.google.com/">
<button type="button">Click here</button>
</a>
Also you can use a button:
For example, in ASP.NET Core syntax :
// 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>
If what you need is that it will look like a button, with emphasis on the gradient image , you can do this:
<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>
你可以簡單地在元素周圍添加一個標籤:
<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>
使用:
<a href="http://www..com/">
<button>Click me</button>
</a>
不幸的是,這種標記在HTML5中不再有效,並且既不會驗證,也不會像預期的那樣工作。 使用另一種方法。
做到這一點的唯一方式(除了BalusC的巧妙形式的想法!)是通過添加JavaScript onclick
事件到按鈕,這不利於可訪問性。
你有沒有考慮像一個按鈕樣式的正常鏈接? 您無法以這種方式實現操作系統特定的按鈕,但它仍然是IMO的最佳方式。
在<button></button>
上使用<a></a>
屬性回答的人很有幫助。
但是最近,我在<form></form>
使用鏈接時遇到了問題。
該按鈕現在被視為/作為提交按鈕(HTML5)。 我嘗試了一下,找到了這個方法。
創建一個CSS樣式按鈕,如下所示:
.btn-style{
border : solid 1px #0088cc;
border-radius : 6px;
moz-border-radius : 6px;
-webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
-moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
font-size : 18px;
color : #696869;
padding : 1px 17px;
background : #eeeeee;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
或者在這裡創建一個新的: CSS按鈕生成器
然後創建一個以你創建的CSS樣式命名的類標記的鏈接:
<a href='link.php' class='btn-style'>Link</a>
這是一個小提琴:
在button
標籤內使用它作為data-href="index.html"
。
如果您想創建一個用於任何地方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,如下所示:
<div class="link-button-wrapper">
<a href="your/link/here">
<h1>Button!</h1>
</a>
</div>
然後在CSS中,您的樣式應該如下所示:
.link-button-wrapper {
width: 200px;
height: 40px;
box-shadow: inset 0px 1px 0px 0px #ffffff;
border-radius: 4px;
background-color: #097BC0;
box-shadow: 0px 2px 4px gray;
display: block;
border:1px solid #094BC0;
}
.link-button-wrapper > a {
display: inline-table;
cursor: pointer;
text-decoration: none;
height: 100%;
width:100%;
}
.link-button-wrapper > a > h1 {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
color: #f7f8f8;
font-size: 18px;
font-family: cabinregular;
text-align: center;
}
此設置的好處:1.使div包裝顯示:塊可以很容易地居中(使用margin:0 auto)和位置(而<a>是內聯且難以定位且不可能居中)。
您可以製作<a> display:塊,將其移動,並將其設置為按鈕,但是垂直對齊文本內部的文字會變得很困難。
這使您可以製作<a> display:inline-table和<h1> display:table-cell,它允許您在<h1>上使用vertical-align:middle並垂直居中(這總是很棒一個按鈕)。 是的,你可以使用填充,但如果你想讓你的按鈕動態調整大小,那就不會那麼乾淨。
有時當你在div中嵌入<a>時,只有文本是可點擊的,這個設置使得整個按鈕可點擊。
如果您只是想轉到其他頁面,則不必處理表單。 表單用於輸入信息,它們應該保留。
允許你乾淨地將按鈕樣式和文本樣式彼此分開(伸展優勢?當然,但是CSS可能會變得很討厭,所以很好分解它)。
這絕對讓我的生活更輕鬆地為可變大小的屏幕設計一個移動網站。
從HTML5開始,按鈕支持formaction
屬性。 最重要的是,不需要Javascript或詭計。
<form>
<button formaction="http://.com">Go to !</button>
</form>
注意事項
- 必須由
<form>
標籤包圍。 -
<button>
類型必須是“提交”(或未指定),我無法使用類型“按鈕”工作。 下面提到了一點。 - 覆蓋表單中的默認操作。 換句話說,如果你在另一種形式中這樣做,它會導致衝突。
參考: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction瀏覽器支持: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility
您也可以將按鈕的type-property
為“button”(它不會提交表單),然後將其嵌套到鏈接中(使其重定向用戶)。
這樣,您可以使用提交表單的同一表單中的其他按鈕,以防需要時使用。 我也認為這在大多數情況下比將表單方法和動作設置為鏈接更好(除非它是搜索形式,我猜...)
例:
<form method="POST" action="/SomePath">
<input type="text" name="somefield"/>
<a href="www.target.com"><button type="button">Go to Target!</button></a>
<button type="submit">submit form</button>
</form>
這樣第一個按鈕重定向用戶,而第二個按鈕提交表單。
小心確保按鈕不會觸發任何操作,因為這會導致衝突。 正如Arius指出的那樣,根據標準,您應該意識到,出於上述原因,這並非嚴格地被認為是有效的HTML。 然而,它在Firefox和Chrome中仍然可以正常工作,但我還沒有針對Internet Explorer進行測試。
這實際上非常簡單,並且不使用任何表單元素。 你可以在裡面用一個按鈕來使用<a>標籤:)。
喜歡這個:
<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>
它會將href加載到同一頁面。 想要一個新的頁面? 只需使用target="_blank"
。
關於BalusC的回复 ,
<form action="http://google.com">
<input type="submit" value="Go to Google">
</form>
我需要添加變量到按鈕,並不知道如何。 我最終使用隱藏的輸入類型 。 我認為這可能有助於其他像我一樣發現此頁面的人。
<input type = "submit" name = "submit" onClick= "window.location= 'http://example.com'">
我將它用於我目前正在研究的網站,它效果很好! 如果你想要一些很酷的樣式,我會把CSS放在這裡。
input[type = "submit"] {
background-color:white;
width:200px;
border: 3px solid #c9c9c9;
font-size:24pt;
margin:5px;
color:#969696;
}
input[type = "submit"]:hover {
color: white;
background-color:#969696;
transition: color 0.2s 0.05s ease;
transition: background-color 0.2s 0.05s ease;
cursor: pointer;
}
here工作JSFiddle
<button onclick="location.href='http://www.example.com'" type="button">
www.example.com</button>