請指教一個更好的鏈接按鈕，返回false解決方案

HTML有鏈接元素請指教一個更好的鏈接按鈕，返回false解決方案

<a href="#"></a>

以及按鈕元素

<button></button>

其實他們的責任是不同的，但...有時候設計希望他們看起來一樣。我沒有任何線索，他們看起來完全一樣，除了重置顯示，邊距，填充，邊框，背景，字體等......他們看起來不一樣，最終有時他們互相默認默認定位屬性。

所以我的如下初步解決方案：一個鏈接設計師

例如想要一個鏈接看起來像一個按鈕。我在鏈接中包裝了一個按鈕！

<a href="#"><button class="coolbutton">look cool</button></a>

我是這樣解決的，尤其是我認爲一個按鈕更容易款式很多。那麼一個標籤將響應點擊鏈接

現在，例如形式：用於提交表單和按鈕旁邊有一個鏈接按鈕。他們需要看起來一樣。和鏈接按鈕不應該提交表單。但它是在表單內...

<a href="#"><button class="coolbutton onclickreturnfalse">I just want to link it</button></a> 
<button> Submit </button>

類.onclickreturnfalse是綁定的JavaScript單擊事件返回false反正。所以它不會提交表單...但問題是..它也返回假的鏈接也..因此，鏈接將無法正常工作...

對不起，我的不好的描述和標題。我現在需要一些意見。網頁設計師如何解決這些問題？

＃

，所以我把我的CSS這裏

＃

button,a.bt1,a.bt2,a.bt3{ 
border: 1px solid rgba(152, 152, 152, 0.1);border-radius: 2px;color: #666666;cursor: pointer; 
font-size: 8pt;font-weight: bold;min-width: 54px;padding: 4px 8px;text-align: center; 
} 
button,button.bt1,a.bt1 { background-color: #F5F5F5; } 
button.bt2,a.bt2  { background-color: #F5F5F5; color:#BF0000; } 
button.bt3,a.bt3  { background-color: #BF0000; color:#EFEFEF; } 
button:hover,a.bt1:hover,a.bt2:hover,a.bt3:hover{ 
border: 1px solid rgba(208, 0, 0, 0.1); text-decoration:none; 
}

認真......他們看起來不同的一點:(

來源

2011-08-31 Elliot Yap

您是否考慮過使用框架？（有些很容易）。 –

如果你檢查一個與螢火蟲的鏈接，得到應用的風格，並複製/粘貼到你的按鈕的風格，這是不夠的？我認爲yu應該總是使用html標籤來實現它們的原始目的：a用於超鏈接/錨點，按鈕用於按鈕。不要只爲它的設計使用html標籤，你會遇到問題。（並且你的解決方案的結果可能在每個瀏覽器中都不一樣） –

嗨，我試着去設計它們。但他們永遠不會看起來完全一樣。特別是當他們放在一起時。設計師將永遠尖叫，爲了一點點不同。他們關心：P –

您應該使用一個按鈕或錨，但我不明白你爲什麼要在鏈接中使用按鈕，你可以將錨點的樣式設置爲按鈕或者簡單地使用按鈕並處理單擊事件。

例如，cli在這個鏈接上不會引起回發（在瀏覽器中啓用了JS）：<a href="#" class="coolbutton" onclick="alert('test'); return false;" />

來源

2011-08-31 11:34:27 npclaudiu

哈哈，謝謝你的回答，使用javascript來處理鏈接不太好。我希望它可以完成只是HTML和CSS :) –

請指教一個更好的鏈接按鈕，返回false解決方案

回答

相關問題