Chia sẻ code bảo vệ button download bằng mật khẩu đơn giản với CSS và JS

<style>
 #protect-body a{margin:1em 0px;padding:5px 12px;background:#6750a4;align-items:center;text-decoration:none;max-width:100%;line-height:2em;display:inline-flex;white-space:nowrap;font-size:16px;color:#fff}#protect-overlay::after{content:'';display:block;position:absolute;right:0;top:0px;bottom:0;width:39%;overflow:hidden;border-top-left-radius:0;border-bottom-left-radius:112%;background-color:#f1f1f0}.overlay-credit{text-align:center;margin-top:20px;z-index:9;position:absolute;bottom:6px;right:15px;font-size:10px}#protect-overlay span.overlay-title{position:relative;font-size:20px;text-align:center;z-index:9}#protect-overlay{background:#fff;padding:30px;display:flex;position:relative;flex-direction:column;box-sizing:border-box;border:2px dashed #6750a4;margin:18px auto}.from-overlay{align-items:center;text-align:center;display:flex;margin-bottom:20px;flex-direction:column;justify-content:center;z-index:9}#protect-overlay input{margin:0 auto;padding:12px;border:0;outline:0;max-width:100%;width:75%;text-align:center;background:#ddd;border-radius:3px;transition:.3s all}#protect-overlay input:focus, #protect-overlay input:active{border:2px solid #6750a4;background:#fff;color:#222}#protect-overlay button{width:unset;margin:.5em 0 .5em 5px;padding:10px 15px;background:#6750a4;border:2px solid transparent;outline:0;color:#fff;border-radius:3px;cursor:pointer;transition:.3s all}#protect-overlay button:hover{background:#fff;border:2px solid #6750a4;color:#6750a4}#protect-overlay input#togglepassword{margin:10px 5px 0 0;padding:0;width:unset}.toggle-wrapper{display:block}@media only screen and (max-width: 728px){#protect-overlay button{margin-left:0}.overlay-credit{left:0!important;right:0!important}}
</style>


<div class="body" id="protect-body" style="margin: 3em 0px;">
<a href="https://www.thanhtruongblog.com/"> Nhấn vào để Tải Xuống </a>
</div>
<div class="overlay" id="protect-overlay">
  <span class="overlay-title"> Nhập mật khẩu để mở khóa Tải Xuống!</span>
  <br />
<form action="a()" class="from-overlay" method="GET">
<input id="password" name="answer" type="password" />
<button type="submit">Mở khóa</button>
<div class="toggle-wrapper"><input id="togglepassword" onclick="x()" type="checkbox" value="Show Password" /><lable>Hiện mật khẩu</lable></div>
</form>
  <span class="overlay-credit"> Code by - ♥ Thành Trương Blog</span>
  <script type="text/javascript">
  function x(){var t=document.getElementById("password");"password"===t.type?t.type="text":t.type="password"}function a(){document.getElementById("password");x.type,x.type="password"}!function(){var t=document.getElementById("protect-overlay"),e=document.getElementById("protect-body");e.style.display="none",t.getElementsByTagName("form")[0].onsubmit=function(){return this.answer.value===atob("dGhhbmh0cnVvbmdibG9n")?(alert("Đúng mật khẩu!"),t.style.display="none",e.style.display="block"):alert("Sai mật khẩu!"),!1}}();
  </script>
</div>