/**/

Read     Tutorial Membuat Button No Tidak bisa di klik, Cocok untuk ngerjain gebetan / teman menggunakan HTML CSS JS

Tutorial Membuat Button No Tidak bisa di klik, Cocok untuk ngerjain gebetan / teman menggunakan HTML CSS JS

Javascript
Hirzi Widyan Putra

Ada yang pernah kena jebakan button ini? Yup ini caranya membuat button YA saja yang bisa diklik nih sob, gampang banget nih tinggal copy paste saja coding berikut ini:

Untuk yang mau liat button nya gimana bisa di Tiktok Gilacoding : https://www.tiktok.com/@gilacoding

atau diyoutube  : YT Gilacoding

Apa yang perlu disiapin?

  • Koneksi internet, karena jquery nya kita pakai cdnjs aja sob

Bisa kalian simpan dengan nama apa saja sob, contohnya index.html :

 

<!DOCTYPE html>
<html>
<head>
  <title>Gilacoding</title>
</head>
<style type="text/css">
body {
  font-size: 18px;
}

.app {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-height: 100vh;
}

.app_title {
  font-weight: normal;
}

.app_buttons {
  display: flex;
  justify-content: center;
  
  .btn {
    margin: 0 20%;
  }
}

.btn {
  background-color: #e75480;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  font-weight: normal;
  padding: 30px;
  font-size: 24px;
  transition: transform .1s ease-out;
  will-change: transform;
  border: 5px solid #e75480;
  
  &:hover {
    background-color: #fff;
    color: #fe828c;
    border-color: #fe828c;
  }
}

.result_container {
  background: #fff;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.app_result {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

.result_title {
  color: #e75480;
  margin-bottom: 0;
}

strong {
  color: #e75480;
}
</style>
<body>
<div class="app">
  <h1 class="app_title">Pacaran Yuk?</h1>
  <div class="app_buttons">
    <a href="#" class="btn js-btn-yes">Yuuk!</a>
    <a href="#" class="btn js-btn-no" style="margin-left: 10px;">Gamau.</a>
  </div>
  <p class="app_footer">Silakan meng-klik salah satu dari tombol di atas.</p>
</div>

<div class="result_container js-result">
  <div class="app_result">
    <h1 class="result_title">Yeaay, Kita Pacaran Mulai hari ini!</h1>
    <br>
    <a href="index.html">Kembali</a>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  function randomPlusOrMinus() {
  let value = Math.floor(Math.random() * 200 - 100 + 1) + 100;
  console.log(value);
  return Math.random() < 0.5 ? -value : value;
}
$(function() {
  $('.js-btn-no').on('touch click mouseover mousedown', function() {
    let $this = $(this);
    let randomX = randomPlusOrMinus();
    let randomY = randomPlusOrMinus();
    $this.css({
      transform: `translateX(${randomX}%) translateY(${randomY}%)`
    });
  });
  $('.js-btn-yes').on('click', function() {
    $('.js-result').show();
  });
});
</script>
</body>
</html>

Terima kasih, tunggu tutorial selanjutnya.

Top