Jumpa lagi disini bareng mimin, kali ini mimin bakal ngeshare sedikit tutorial bagaimana cara membuat image button dengan mudah.
Ok dari pada berlama-lama ,langsung saja kita simak tutorial berikut .
Pertama sobat copy kode dibawah ini kemudian pastekan ke notepad atau aplikasi text editor lainnya yang sobat punya .
<html>
<head>
<title>DEMO&DOWNLIAD CODE</title>
<style>
Masukkan CSS nya disini
</style>
</head>
<body>
<center>
<h1>KLIK GAMBAR DIBAWAH INI!</h1>
<hr>
<a href='link web yang akan dituju.com/'><img alt="DOWNLOAD" src="link gambar punyakamu" style="display: block;margin-left: auto;margin-right: auto;" width="400px;height:100px;"></a>
</div>
</div>
<p align="center">Klik Gambar itu Maka Akan mengarahkan anda ke Halaman lain/Web Lain.</p>
</body>
</html>Sekarang sobat tinggal Upload Gambar sobat Di sini
Contoh disini saya ingin menjadikan gambar dibawah ini sebagai image button-nya nanti .
Langkah berikutnya, Pastekan Link Gambar yang sudah anda Upload tadi, lalu copy link gambarnya dan pastekan pada bagian kode src.
Setelah itu tambahkan kode berikut dibawah tag <hr>.
Sedikit info nih ,kenapa saya memberi tag div ,karena tag ini juga sering digunakan untuk mendefinisikan id atau class dari css itu sendiri .
<div class="efek">
<div class="oval">Lalu copy dan pastekan juga kode ini
</div>
</div>Letakkan kode tersebut setelah tag </a>,karena kode ini berperan sebagai penutup dari tag div yang diatas tadi.
Kemudian tambahkan Style CSS-nya .
h1{
text-align:center;
}
.efek {
position: relative;
width: 100%;
height: 100px;
margin: 0 auto;
overflow: hidden;
}
img.tengah {
display: block;
margin-left: auto;
margin-right: auto;
}
.oval {
position: absolute;
top: 0;
left: 282px;
right: auto;
}
.oval img {
-webkit-transition: 0.0s ease;
transition: 0.1s ease;
}
.efek:hover .oval img {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}Letakkan kode ini dibawah elemen/tag <style>.
Tambahan!
Pada kode a href ,letakkan Link blog/atau web yang ingin di tuju nanti.
Sekian dari postingan kali ini ,saya mohon maaf jika terjadi kesalahan dalam pengetikan pada artikel ini .
Gambar dibawah Ini adalah hasil dari tutorial diatas .
Comments
Post a Comment