私のウェブページのボタンをFacebookのボタンのように見せるにはどうすればいいですか？

Question

誰かがここでスクリプトを共有して、自分のウェブページのボタンをFacebookのもののように見せたり、少なくともある程度は感じさせることができますか？前もって感謝します。私はこれを知ることは非常に興味があります。なぜなら、7日間、CSSの助けを借りてそうしようとしていましたが、成功しなかったからです。私を助けてください。

Answer 1

私はChrome開発ツールやWeb開発ツールのようなツールを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をしたかを確認するためにあなたを伝えることができるかを見てみましょう。

乾杯！

Answer 2

あなたがする必要があるのは、CSSを使用してボタンにスタイルを割り当てることだけです。 ボタンにスタイルを割り当てるには、スタイルをINPUT [type = "submit"]に設定する必要があります。ここでは例です：

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

Answer 3

ようこそアミット、私はティムに同意

、それはあなたのコードを知らなくてもあなたを助けることは困難です。それでも、他のウェブサイトから学びたい場合は、Firebugをご覧ください。 FireFoxのプラグインで、Flash以外のほとんどのWebサイトのコードを分析するのに役立ちます。 これをインストールして右クリックして、inspect要素を選択します。

Google Chromeを使用している場合、そのような機能は、brafalesさんのようにボックスの外で利用可能です。 しかし、私はFirebugを、特に初心者にはもう少し快適に感じます。

ウェブサイトを閲覧してオンラインで編集することで、多くのことを学ぶことができます。結果をすぐに見ることができ、さまざまなCSSスタイルの原因を突き止めることができます。

Answer 4

フルクロスブラウザのソリューションについて、あなたはこのようにCSSスプライトを使用することによって、これを達成できる（私は現在入手可能な紫色のスプライト画像持っている：Dを）：

スプライト画像（光勾配）：

マークアップ

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