Efek Click Button di Input Bertipe Image dan Div
Efek Click Button di Input Bertype Image dan Div
Dalam pemograman apapun kita selalu dituntut untuk berkreasi dalam membuat tampilan aplikasi sehingga terlihat lebih professional dan responsive. Seperti halnya membuat Efek click button untuk <input type=”image”>, <div> dan lainnya. Sebelum saya menjelaskan lebih jauh perhatikanlah button di bawah ini,
Apa yang terjadi dengan button di atas terjadinya
perubahan posisi ke bawah ketika di click dan kembali lagi ke posisi semula ketika
melepas click pada mouse, dan ada highlight pada color pada button. Efek tersebut
dapat juga digunakan pada element nya seperti <input>, dan <div>. Kok
Bisa?. Pasti bisa kita hanya perlu memanfaatkan fitur2 yang sudah di sediakan
pada CSS, dan Jquery.
Efek Click Button Menggunakan CSS Untuk <Input
Type=”Image”> dan <div>.
Kode CSS yang digunakan adalah sebagai berikut;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.imgRear {
padding:2px 2px; font-family:caption; font-size:14px; background:grey; display:inline; border-radius:2px;
background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #F2F2F2), color-stop(1, #CFCFCF));
background-image: -o-linear-gradient(bottom, #F2F2F2 0%, #CFCFCF 100%);
background-image: -moz-linear-gradient(bottom, #F2F2F2 0%, #CFCFCF 100%);
background-image: -webkit-linear-gradient(bottom, #F2F2F2 0%, #CFCFCF 100%);
background-image: -ms-linear-gradient(bottom, #F2F2F2 0%, #CFCFCF 100%);
background-image: linear-gradient(to bottom, #F2F2F2 0%, #CFCFCF 100%);
cursor:default;
text-align:center;
border-radius: 5px;
}
.imgRear:hover{
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EAF6FD), color-stop(1, #A7D8F5));
background-image: -o-linear-gradient(bottom, #EAF6FD 0%, #A7D8F5 100%);
background-image: -moz-linear-gradient(bottom, #EAF6FD 0%, #A7D8F5 100%);
background-image: -webkit-linear-gradient(bottom, #EAF6FD 0%, #A7D8F5 100%);
background-image: -ms-linear-gradient(bottom, #EAF6FD 0%, #A7D8F5 100%);
background-image: linear-gradient(to bottom, #EAF6FD 0%, #A7D8F5 100%);
}
.imgRear:active{ padding:2px 2px 2px 2px;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #E5F4FC),color-stop(0.5, #C4E5F6), color-stop(0.51, #98D0EF), color-stop(1, #68B3DB));
background-image: -o-linear-gradient(bottom, #E5F4FC 0%, #C4E5F6 50%, #98D0EF 51%, #68B3DB 100%);
background-image: -moz-linear-gradient(bottom, #E5F4FC 0%, #C4E5F6 50%, #98D0EF 51%, #68B3DB 100%);
background-image: -webkit-linear-gradient(bottom, #E5F4FC 0%, #C4E5F6 50%, #98D0EF 51%, #68B3DB 100%);
background-image: -ms-linear-gradient(bottom, #E5F4FC 0%, #C4E5F6 50%, #98D0EF 51%, #68B3DB 100%);
background-image: linear-gradient(to bottom, #E5F4FC 0%, #C4E5F6 50%, #98D0EF 51%, #68B3DB 100%);
top:4px;
position:relative;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<center><input class="imgRear" src="https://lh3.googleusercontent.com/-8T5K3BCEE0k/XLQsGob2TUI/AAAAAAAAFv0/-OiwdGTwoOQLlQN__xp5rHj3BQb767SHQCLcBGAs/h110/Logo%2BAgung%2BPanduan.png" style="height: 50px; outline: none; width: 150px;" type="image" /></center>
</div>
</body>
</html>
Efek Click Button Menggunakan Jquery Untuk <Input Type=”Image”> dan <div>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.imgClick{
border:1px solid black;
position:relative;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".imgClick").mousedown(function(){
var mrgtb = parseInt($(this).css("margin-top"));
var mrglf = parseInt($(this).css("margin-left"));
mrgtb=mrgtb+20;
mrglf=mrglf+20;
//$(this).css("margin-top",mrgtb+"px").css("margin-left",mrglf+"px");
$(this).css({top:mrgtb+"px", left:mrglf+"px"});
}).mouseup(function(){
var mrgtb = parseInt($(this).css("margin-top"));
var mrglf = parseInt($(this).css("margin-left"));
mrgtb=mrgtb-20;
mrglf=mrglf-20;
//$(this).css("margin-top",mrgtb+"px").css("margin-left",mrglf+"px");
$(this).css({top:mrgtb+"px", left:mrglf+"px"});
});
});
</script>
</head>
<body>
<center><input class="imgClick" src="https://lh3.googleusercontent.com/-8T5K3BCEE0k/XLQsGob2TUI/AAAAAAAAFv0/-OiwdGTwoOQLlQN__xp5rHj3BQb767SHQCLcBGAs/h110/Logo%2BAgung%2BPanduan.png" style="height: 50px; outline: none; width: 150px;" type="image" /></center>
</body>
</html>
Demikianlah Cara Membuat Sebuah <Input Type=’image’> dan <Div> memiliki efek click seperti click pada button.
