ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00

BLANTERWISDOM105

Efek Click Button di Input Bertipe Image dan Div

4/21/2020

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,

The Click Button effect

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.

Share This :

0 Comments