如何設置地址鏈接的樣式，使其看起來像使用CSS的輸入按鈕

我被要求將網絡上的地址鏈接看起來像默認按鈕。我對CSS不太熟悉。有沒有人試過這個？我只是希望他們看起來像普通的普通按鈕，漸變和類似的東西。我需要使用它嗎？如何設置地址鏈接的樣式，使其看起來像使用CSS的輸入按鈕

2011-05-22 Janice M

當你說一個「地址鏈接」，你的意思是''元素？ – Marcin 2011-05-22 12:18:19

可能重複的[如何將樣式錨標籤看起來像一個按鈕]（http://stackoverflow.com/questions/1121823/how-to-style-an-anchor-tag-to-look-like-a-button -with-the-same-height-as-the-the-butt） – ditkin 2011-05-22 12:21:39

我喜歡那裏提出的解決方案，但是我會去設置不同的背景圖像。 CSS背景圖像的使用將允許mousehover在按鈕上放置突出顯示效果，而CSS3多個背景圖像將允許寬度變化，但是每次都可以很好地適應按鈕。 – lpd 2011-05-22 12:32:53

您需要做的第一件事就是給它一個display：block或inline-block屬性，以便它可以將所有您想要的margin/padding設置。然後，你可能想看看這個真棒CSS3造型應用：

http://www.css3.me/

來源

2011-05-22 13:04:03 fordareh

我不明白爲什麼你想這樣做與CSS.You可以插入圖片（類似於按鈕），並創建一個鏈接在它的HTML標籤。如果你不熟悉CSS或HTML標籤，你可以使用www.w3schools.com。這個網站對創建網站非常有用。我希望我能解決你的問題。

來源

2011-05-22 13:06:33 Tavousi

以下是Google Chrome瀏覽器選項頁面中按鈕的CSS。他們使用button標籤，但我用a標籤取而代之，它也起作用。這隻適用於webkit瀏覽器，但應該很容易找到其他瀏覽器的相應/替代聲明。演示請參見fiddle。

HTML

<a>Click me</a>

CSS

a { 
    -webkit-border-radius: 2px; 
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 
    -webkit-user-select: none; 
    background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5); 
    border: 1px solid #aaa; 
    color: #444; 
    font-size: inherit; 
    margin-bottom: 0px; 
    min-width: 4em; 
    padding: 3px 12px 3px 12px; 
    font-family: sans-serif; 
} 

a:hover { 
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); 
    background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9); 
    border-color: #999; 
    color: #222; 
} 

a:active { 
    -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2); 
    background: #ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc); 
    color: #333; 
}

來源

2011-05-22 13:19:36 melhosseiny

如果您使用的圖片，它看起來就像是圖片。按鈕在OS和瀏覽器的每種組合中看起來都不同，因此選擇一個固定的按鈕圖像可能會混淆用戶。

我認爲一個更好的解決方案是插入鏈接並將其顯示爲鏈接，或者應用最少的樣式來給它一個按鈕外觀。然後，使用Javascript/JQuery來真正插入一個按鈕而不是鏈接，併爲它分配一個onclick事件，使其表現得像鏈接一樣。

這樣，您將擁有一個真實的按鈕，其行爲與按鈕相似，並且在當前瀏覽器中看起來像按鈕。如果用戶沒有Javascript（這也適用於抓取工具），他們仍然有可能使用鏈接，您可以在任何地方設置樣式，但不是一成不變的按鈕。

來源

2011-05-22 13:39:21 GolezTrol

<html> 
<head> 
<style type="text/css"> 
a:link,a:visited 
{ 
display:block; 
font-weight:bold; 
color:#FFFFFF; 
background-color:#98bf21; 
width:120px; 
text-align:center; 
padding:4px; 
text-decoration:none; 
} 
a:hover,a:active 
{ 
background-color:#7A991A; 
} 
</style> 
</head> 

<body> 
<a href="default.asp" target="_blank">This is a link</a> 
</body> 
</html>

來源

2011-05-23 07:51:51 Tavousi

如何設置地址鏈接的樣式，使其看起來像使用CSS的輸入按鈕

回答

相關問題