html - ボタンのスキンを変更する方法

Question

こんにちは、ボタンと textArea スキンのスキン (形状) を別のものに変更しようとしています。2番目の写真のようなもの。

Answer 1

これを行うには、複数の可能性があります。

背景画像を使用します (すべてのブラウザーで機能しますが、個人的には、細部ごとに画像ファイルを再編集して保存するのは好きではありません) CSS:

button {
  background: url('some image..');
  width: <width of the background image>;
  height: <height of the background image>;
  ...
}

button:hover {
  background: url('mouseover image');
  ...
}

または、新しい CSS プロパティを使用してボタンを作成することもできます。それらはあなたが望むものすべてを提供し、背景画像を使用するよりもはるかにクールですが、欠点は、今日これを完全にサポートしているブラウザーが多くないことです (そして、長い間サポートしていないブラウザーもあります。ええ、IE、つまりあなたを意味します):

button {
  border: solid 1px somecolor;
  color: #eee;
  border-radius:5px;
 -moz-border-radius:5px;
  background: -moz-linear-gradient(top, #5E5E5E 0%, #474747 51%, #0a0e0a 51%, #0a0809 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5E5E5E), color-stop(51%,#474747), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809));
}
button:hover {
  color: white;
}

CSS グラデーションを作成するには、こちらを参照してください: http://www.colorzilla.com/gradient-editor/

純粋な CSS3 を使用して可能なことの印象とチュートリアル:

• http://technology.posterous.com/make-css3-buttons-that-are-extremely-fancy

• http://www.kulturbanause.de/2010/05/css3-als-photoshop-ersatz-buttons-und-grafiken/ (ドイツ語ですが、それでもボタンが表示され、CSS を読み取ることができます)

• より単純な例は、必要なものだけかもしれません: http://capturedsparks.com/pure-css3-buttons/

テキストエリアのスタイリングに同じプロパティを使用できます: border、background、colorフォントの色など。

Answer 2

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" heght="50" alt="submit" />
</button>

Answer 3

以下のように、下部または送信 HTML タグにスタイルを適用できます。

<input type="submit" class="mybotton" value="Continue" />

このようにして、背景画像を追加できます。

.mybotton{
    background-image: url(buttonimage.png);
}

よろしく！

Answer 4

上記とまったく同じデザインが必要な場合は、これを使用してください

<input type="image" src="submitbutton.png" />