Form button mật khẩu bằng Jquery với hiệu ứng đẹp mắt

Are you sure?

You want to turn off ads.

Công DEV chào tất cả các bạn. Vài hôm nay mình bận quá nên cũng chưa ra thêm được bài thủ thuật nào mới cả nên hôm nay nhân cái ngày trời mưa to quá, mình ngồi nhà và chia sẻ cho các bạn 1 thủ thuật nho nhỏ bằng CSS và Jquery để tạo 1 form button đăng nhập bằng mật khẩu đơn giản trong blog có hiệu ứng đẹp mắt khi ta click chuột tại button đó nhé.

Password Button from Jquery

Form button mật khẩu bằng Jquery với hiệu ứng đẹp mắt


Các bước thực hiện

Bước 1: Truy cập Blogger.com > Chủ đề > Chỉnh sửa HTML
Bước 2: Dán toàn bộ code dưới đây trước thẻ
</body>


<b:if cond='data:blog.pageType == "item"'>
<style>
.container {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

p {
  color: rgba(0,0,0,0.3);
}

.dtc-bnt {
  position: relative;
  max-width: 250px;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 20px;
  border-radius: 1.7em;
  box-shadow:0 0 20px rgba(0,0,0,0.2);
  overflow: hidden;
}

.dtc-bnt input[type="password"]{
  border: none;
  line-height: 2.8em;
  width: 100%;
  padding-left: 1.5em;
  transition: opacity 600ms, transform 300ms;
  
  &:focus {
    outline: none;
  }
  
  &::placeholder {
    color: rgba(0,0,0,0.2);
  }
}

button {
  color: #fff;
  background: none;
  border: none;
  width: 2.1em;
  height: 2.1em;
  flex-shrink: 0;
  margin-right: 0.45em;
  text-align: center;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  padding: 0;
  
  &:focus {
    outline: none;
  }
  
  svg {
    position: absolute;
    display: block;
    width: 50%;
    height: 40%;
    top: 30%;
    left: 25%;
    margin: 0;
    fill: currentColor;
  }
}

.icon-error {
  opacity: 0;
}

.icon-success {
  fill: transparent;
}

.icon-error path,
.icon-success path {
  stroke: #fff;
  stroke-width: 8;
}

.icon-success path {
  stroke-dasharray: 175;
  stroke-dashoffset: 175;
}

.submit-bg {
  background: #65D9F9;
  position: absolute;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  transition: transform 300ms ease-in-out;
  
  &::before , &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 500ms;
  }
  
  &::before {
    background: #68D38B;
  }
  
  &::after {
    background: #E8426E;
  }
}

.message {
  position: absolute;
  color: #fff;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(3em);
  transition: transform 500ms, opacity 250ms;
  z-index: 2;
}

form:not([data-state="typing"]) {
  input {
    transition: opacity 300ms, transform 1s;
    transform: translateX(-2em);
    opacity: 0;
  }
 
  .submit-bg {
    transform: scale(11);
  }
  .message {
    transform: none;
  }
}

form[data-state="success"] {
  .submit-bg::before,
  .message--success {
    opacity: 1;
  }
}

form[data-state="error"] {
  .submit-bg::after,
  .message--error {
    opacity: 1;
  }
}
</style>
<script>
let submitButton = document.querySelector('button');
let input = document.querySelector('input');
let form = document.querySelector('form');
let arrow = document.querySelector('.icon-arrow');
let close = document.querySelector('.icon-error');
let check = document.querySelector('.icon-success');
let checkPath = document.querySelector('.icon-success path');

console.log(checkPath.getTotalLength());
submitButton.addEventListener('click', (e)=>{
  e.preventDefault();
  if(form.dataset.state != "typing") {
    TweenMax.to(close,0.5,{
      opacity:0,
      rotation:0
    });
    TweenMax.fromTo(check,0.5,{
      rotation:360*3
    },{
      rotation:0
    });
    TweenMax.to(checkPath,0.5,{
      strokeDashoffset:175
    });
    form.dataset.state = "typing";
    TweenMax.fromTo(arrow,0.45,{
      rotation:0,
      x:'-60px',
      opacity:'0'
    },{
      rotation:0,
      x:'0',
      opacity:'1'
    });
    return;
  }
  
  TweenMax.to(arrow,1,{
    rotation: 360*5,
    transformOrigin: "50% 50%",
    opacity: 0
  });
  
  setTimeout(()=>{
    if(input.value != 'congdev.com') {
      form.dataset.state = "error";
      TweenMax.to(close,0.5,{
        rotation: 360*3,
        opacity: 1
      });
    } else {
      form.dataset.state = "success";
      TweenMax.to(checkPath,0.65,{
        strokeDashoffset: 0
      });
    }
  },500);
});
</script>
</b:if>
Bước 3: Lưu template lại.
Lưu ý:
Bạn tìm trong đoạn code
if(input.value != 'congdev.com')
thay congdev.com bằng mật khẩu của mình.

Cách sử dụng

Để sử dụng form button có hiệu ứng này, bạn cứ soạn bài viết bình thường. Sau đó, bạn chuyển qua tab HTML (cạnh tab Viết) và dán đoạn code này vào chỗ cần hiển thị from button trong bài viết nhé!

<div class="container">
  <form data-state="typing" class="dtc-bnt">
    <input type="password" placeholder="mật khẩu...">
    <button type="submit">
      <div class="submit-bg"></div>
      <svg class="icon-arrow" viewBox="0 0 31.49 31.49">
        <path d="M21.205 5.007c-.429-.444-1.143-.444-1.587 0-.429.429-.429 1.143 0 1.571l8.047 8.047H1.111C.492 14.626 0 15.118 0 15.737c0 .619.492 1.127 1.111 1.127h26.554l-8.047 8.032c-.429.444-.429 1.159 0 1.587.444.444 1.159.444 1.587 0l9.952-9.952c.444-.429.444-1.143 0-1.571l-9.952-9.953z"/>
      </svg>
      <svg class="icon-error" viewBox="0 0 100 100">
       <path d="M10 10 L90 90 M10 90 L90 10"/>
      </svg>
      <svg class="icon-success" viewBox="0 0 100 100">
        <path d="M0 60 L40 100 L100 0"/>
      </svg>
    </button>
    <span class="message message--error">Sai mật khẩu!</span>
    <span class="message message--success">Thành công!</span>
  </form>
  <p>Mật khẩu "<strong>congdev.com</strong>"</p>
</div>

Form button mật khẩu bằng Jquery với hiệu ứng đẹp mắt
Chuyển sang tab HTML (khung đỏ) và dán code button tại chỗ bạn muốn

Lời kết

Vậy là mình vừa chia sẻ xong cho các bạn 1 hiệu ứng hover vào button mới khá đẹp. Chúc các bạn thành công và đón đợi bài tiếp theo bên blog mình nhé!
Tags: #Blogspot, #Tut
,
- Trong quá trình viết và đăng bài mình có thể sẽ có nhiều thiếu sót mong được sự góp ý của các bạn để mình rút kinh nghiệm.
- MỘT SỐ LƯU Ý KHI BÌNH LUẬN
Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời
Trước khi nhập nhận xét bằng blog comment hãy Mã hóa code hoặc chèn biểu tượng:
Blogger Comment
Facebook Comment
Tác giả: Công DEV

Say hello to you!

  • 2 nhận xét: