Bagaimana cara mengubah gambar tombol input menggunakan CSS?

Jadi, saya bisa membuat tombol input dengan menggunakan gambar

<INPUT type="image" src="/images/Btn.PNG" value="">

Tapi, saya tidak bisa mendapatkan perilaku yang sama menggunakan CSS. Misalnya, saya sudah mencoba

<INPUT type="image" class="myButton" value="">

di mana "myButton" didefinisikan dalam file CSS sebagai

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Jika hanya itu yang ingin saya lakukan, saya bisa menggunakan gaya asli, tetapi saya ingin mengubah tampilan tombol pada hover (menggunakan myButton:hoverkelas). Saya tahu tautannya bagus, karena saya dapat memuatnya untuk gambar latar belakang untuk bagian halaman lainnya (seperti halnya cek). Saya menemukan contoh di web tentang cara melakukannya menggunakan JavaScript, tetapi saya sedang mencari solusi CSS.

Saya menggunakan Firefox 3.0.3 jika itu membuat perbedaan.

Jika Anda ingin mendesain tombol menggunakan CSS, buatlah tombol type = "submit" daripada type = "image". type = "image" mengharapkan SRC, yang tidak dapat Anda atur dalam CSS.

Perhatikan bahwa Safari tidak akan membiarkan Anda mendesain tombol apa pun dengan cara yang Anda cari. Jika Anda memerlukan dukungan Safari, Anda harus menempatkan gambar dan memiliki fungsi onclick yang mengirimkan formulir.

Anda dapat menggunakan <button>tag. Untuk pengiriman, cukup tambahkantype="submit" . Kemudian gunakan gambar latar ketika Anda ingin tombol muncul sebagai grafik.

Seperti itu:

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

Info lebih lanjut: http://htmldog.com/reference/htmltags/button/

HTML

<div class="myButton"><INPUT type="submit" name="" value=""></div>

CSS

div.myButton input {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Ini akan bekerja di mana saja, bahkan di Safari.

Artikel ini tentang penggantian gambar CSS untuk tombol kirim bisa membantu.

"Dengan menggunakan metode ini Anda akan mendapatkan gambar yang dapat diklik saat style sheet aktif, dan tombol standar ketika style sheet tidak aktif. Caranya adalah dengan menerapkan metode ganti gambar ke tag tombol dan menggunakannya sebagai tombol kirim, alih-alih menggunakan input.

Dan karena batas tombol dihapus, itu juga disarankan untuk mengubah kursor tombol ke yang berbentuk tangan yang digunakan untuk tautan, karena ini memberikan tip visual kepada pengguna. "

Kode CSS:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

Berikut adalah solusi yang lebih sederhana tetapi tanpa div sekitarnya tambahan:

<input type="submit" value="Submit">

CSS menggunakan teknik penggantian gambar dasar. Untuk poin bonus, ini menunjukkan menggunakan sprite gambar:

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

Sumber: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

Inilah yang bekerja untuk saya di Internet Explorer, sedikit modifikasi pada solusi oleh Philoye.

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

Anda dapat menggunakan blank.gif (gambar transparan 1px) sebagai target dalam tag Anda

<input type="image" src="img/blank.gif" class="button"> 

dan kemudian style background di css:

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}

Variasi pada jawaban sebelumnya. Saya menemukan bahwa opacity perlu diatur, tentu saja ini akan berfungsi di IE6 dan seterusnya. Ada masalah dengan solusi line-height di IE8 di mana tombol tidak mau merespons. Dan dengan ini Anda mendapatkan kursor tangan juga!

<div id="myButton">
  <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
 background: url("form_send_button.gif") no-repeat;
 width: 62px;
 height: 24px;
 }

#myInputButton { 
 background: url("form_send_button.gif") no-repeat;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 width: 67px;
 height: 26px;
 cursor: pointer;
 cursor: hand;
}

Saya pikir yang berikut ini adalah solusi terbaik:

css:

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat:no-repeat;
    width: 24px;
    height: 24px;
}

html:

<input class="edit-button" type="image" src="transparent.png" />

Solusi saya tanpa js dan tanpa gambar adalah ini:

* HTML:

<input type=Submit class=continue_shopping_2 
name=Register title="Confirm Your Data!" 
value="confirm your data">

* CSS:

.continue_shopping_2:hover{
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;}


.continue_shopping_2{
padding:0 0 3px 0;
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:174px;
height:21px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#919191;
font-family:Verdana;
font-size:13px;
font-style:normal;
line-height:normal;
font-weight:bold;
color:#FFFFFF;}

Mungkin Anda bisa mengimpor file .js juga dan memiliki penggantian gambar di sana, di JavaScript.

Mari kita asumsikan Anda tidak dapat mengubah tipe input, atau bahkan src. Anda HANYA memiliki css untuk dimainkan.

Jika Anda tahu ketinggian yang Anda inginkan, dan Anda memiliki url gambar latar yang ingin Anda gunakan, Anda beruntung.

Atur ketinggian ke nol dan padding-top ke ketinggian yang Anda inginkan. Itu akan mendorong gambar asli keluar dari pandangan, memberi Anda ruang bersih sempurna untuk menunjukkan gambar latar belakang css Anda.

Bekerja di Chrome. Tidak tahu apakah itu berfungsi di IE. Nyaris tidak ada yang pintar, jadi mungkin tidak.

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

<input type="image" src="daft.jpg" id="daft">