Skip to main content

Cara Membuat Image Button HTML & CSS


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 .
Kalo sobat mau jadikan gambar diatas sebagai image button-nya juga gak papa.
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 .
DOWNLOAD RAW
Labels:

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Text Mengetik Sendiri Dengan JavaScript

Hai sobat codes, kali ini mimin bakal share sebuah tutorial bagaimana Cara Membuat Text Seakan Mengetik sendiri dengan Menggunakan JavaScript. Buatlah Sebuah File Baru dengan extensi HTML. Contoh : mengetik.html Kemudian Untuk Langkah-Langkah nya Sihlakan Ikuti Sesuai langkah-langkah Berikut ini, Perhatikan dengan baik-baik! Langkah Pertama Copy Script HTML dibawah Ini, pastekan Ke file baru yang telah sobat Buat. <!DOCTYPE html> <html> <head> <title>Text Sedang Mengetik...</title> </head> <body> </body> </html> Baca Juga:  Cara Membuat Text Berkedip Dengan JavaScript Langkah Kedua Kemudian, copykan kode JavaScript berikut ini. <script type="text/javascript"> TypingText = function(element, interval, cursor, finishedCallback) {   if((typeof document.getElementById == "undefined") || (typeof element.innerHTML == "undefined")) {     this.running = true;     return;   }   this....
Post a Comment
Baca Lebih Lanjut »

Cara Membuat Text Berkedip Dengan JavaScript

Hai sobat codes , kali ini mimin Bakal Share Sebuah Tutorial Bagaimana Sih Caranya Membuat Sebuah Text Berkedap Kedip Hanya Dengan Menggunakan JavaScript, Untuk Memulai Membuat Text Berkedap Kedip, Buat Lah Sebuah File Baru Dengan Nama Sesuai Keinginan kalian. Berikan extensi file tersebut dengan extensi HTML. Contoh : berkedip.html Langkah Pertama Copykan Code HTML berikut ke file yang telah Kalian Buat. <!DOCTYPE html> <html> <head> <title>Contoh Text Berkedip</title> </head> <body> </body> </html> Langkah Kedua Kemudian, Tambahkan Kode JavaScript Berikut ini. <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script> setInterval(function(){      $(".kedip").toggle(); },400); </script> Letakkan dibawah tag <body> . Baca Juga:  Cara Redirect Halaman Web Menggunakan JavaScript Langkah Ketiga Untuk Membuat Text nya menjad...
Post a Comment
Baca Lebih Lanjut »

Cara Mengatur Perulangan Background Image Dengan CSS

Hai sobat codes , kali ini mimin bakal memberi sedikit Info Nih Buat Kalian semua. Siapa sih disini yang ingin Membuat Background image pada  Website Kesayangan-nya?... Tapi pernah gak sih Kalian Ketika Ingin Membuat Background Image pada web nya, Tetapi Gambar nya malah pecah-pecah atau Bisa Dibilang Menyebar kesana ke sini dan kehati kamu:v hehehe.... Bercanda:') Jangan Baper:'v Nah kali ini Mimin Bakal Share Ke Kalian Bagaimana Sih Cara Mengatasi background image nya supaya Tidak Pecah Lagi. Ok langsung saja Simak Tutorial Info Dan penjelasannya Kali ini! Background-repeat: repeat;  Background Repeat Jika Diartikan Dalam Bahasa Indonesia adalah pengulangan latar belakang , jika kita Menambahkan Kode css sebagai berikut maka akan mengulang secara Vertical Dan Horizontal. Kode Css: background-repeat: repeat;  Jika Digambarkan Seperti Gambar dibawah ini. Background-repeat: repeat-y;  Jika kita membuat Kode css sebagai berikut " background-repeat: repe...
Post a Comment
Baca Lebih Lanjut »