Dosya yükleme butonunu resimli yapmak

Bir resim yükleme yada dosya yükleme sitesi yapmak istiyorsunuz klasik buton yerine resimli olmasını istiyorsanız aşağıdaki kodları kullanabilirsiniz.

<style type="text/css">
.file {
width: 128px;
height: 128px;
background: url('dosya-buton.png');
overflow: hidden
}
.file input {
width: 128px;
height: 128px;
opacity: 0;
cursor: pointer
}

.file_text {
width: 200px;
padding: 5px;
background: #eee;
font: 12px Arial;
position: relative
}
.file_text input {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0
}
</style>

<div class="file">
<input type="file" />
</div>

<div style="padding: 20px"></div>

<div class="file_text">
Dosya Yüklemek İçin Tıklayın
<input type="file" />
</div>
dosya-buton.png adında bir resim yada aşağıdaki resimi kullanabilirsiniz



Linkback: https://www.buyuknet.com/dosya-yukleme-butonunu-resimli-yapmak-t45548.0.html