我如何讓我的網頁按鈕看起來像Facebook按鈕的按鈕？

有人可以在這裏分享一個腳本，使我的網頁按鈕外觀和感覺像Facebook的或至少在某種程度上。提前致謝。我很想知道這一點，因爲在CSS的幫助下已經有7天的時間嘗試這麼做了，但是沒有成功。請幫幫我。我如何讓我的網頁按鈕看起來像Facebook按鈕的按鈕？

來源

2011-02-09 amit

這不是一個代碼的請求的網站。發佈你迄今爲止所做的事，也許有人可以幫助你。 – 2011-02-09 14:33:02

我會推薦使用類似於Chrome開發工具或Firefox開發工具的工具，並簡單地檢查一下您想要模仿的樣式。我剛剛發現在Facebook上的按鈕，似乎他們正在使用的標籤容器這個樣式表：

webkit-box-shadow: rgba(0, 0, 0, 0.046875) 0px 1px 0px 0px; 
background-attachment: scroll; 
background-clip: border-box; 
background-color: #DDD; 
background-image: none; 
background-origin: padding-box; 
border-bottom-color: #999; 
border-bottom-style: solid; 
border-bottom-width: 1px; 
border-left-color: #999; 
border-left-style: solid; 
border-left-width: 1px; 
border-right-color: #999; 
border-right-style: solid; 
border-right-width: 1px; 
border-top-color: #999; 
border-top-style: solid; 
border-top-width: 1px; 
color: #666; 
cursor: pointer; 
direction: ltr; 
display: inline-block; 
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; 
font-size: 11px; 
font-weight: bold; 
height: 16px; 
line-height: normal; 
margin-bottom: 5px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
overflow-y: visible; 
padding-bottom: 2px; 
padding-left: 6px; 
padding-right: 6px; 
padding-top: 2px; 
text-align: center; 
text-decoration: none; 
unicode-bidi: normal; 
vertical-align: top; 
white-space: nowrap; 
width: 67px;

只要看看那些什麼有用的插件可以告訴你，看看別人是怎麼做的CSS。

乾杯！

來源

2011-02-09 14:34:09 brafales

您需要做的就是使用CSS爲您的按鈕指定一些樣式。爲了給一個按鈕分配樣式，你需要設置一些樣式爲INPUT [type =「submit」]。這裏有一個例子：

INPUT[type="submit"] 
{ 
    */ put your styles here */ 
}

來源

2011-02-09 14:36:42

歡迎艾米特，

我與蒂姆同意，這很難幫助你不知道你的代碼。不過，如果你想從其他網站學習，你可能想看看Firebug。它是Firefox的一個插件，它可以幫助你分析幾乎任何給定的非Flash網站的代碼。安裝它並右鍵單擊並選擇檢查元素。

如果您使用谷歌瀏覽器，這樣的功能可以在框外使用，就像bra says說的那樣。然而，我發現Firebug更舒適一些，特別是對於新手來說。

你可以通過瀏覽任何網站和在線編輯東西瞭解很多。您將立即看到結果並能夠分辨出不同的CSS樣式。

來源

2011-02-09 14:38:21

對於一個完整的跨瀏覽器的解決方案，你可以通過這種方式使用CSS精靈做到這一點（我有紫色精靈形象目前可供選擇：d）：

精靈圖像（光梯度）：

enter image description here

標記

<input value="Share" type="button" /> 
<br /><br /> 
<input value="Comment" type="button" />

CSS

input[type="button"]{ 
    background: url(spriteImgUrl) repeat-x scroll; 
    padding: 6px 10px; 
    color:#FFFFFF; 
    padding:4px 6px; 
    font-size:12px; 
    font-weight:bold; 
    border:1px solid #3D197C; 
    cursor:pointer; 
} 
input[type="button"]:hover{ 
    background-position: 0 -48px; 
} 
input[type="button"]:active{ 
    background-position: 0 -96px; 
}

小提琴：http://www.jsfiddle.net/steweb/WxCmB/

來源

2011-02-09 14:43:39 stecb

我如何讓我的網頁按鈕看起來像Facebook按鈕的按鈕？

回答

相關問題