Hướng dẫn tạo hiệu ứng cho Animate Buttons - How t

Hiệu ứng của button xảy ra khi người dùng có tương tác với button đó, nó giúp cho người dùng biết được mình đã thực hiện thao tác đối với button chưa và cũng khiến những button trên website của bạn trở nên sống động hơn.

Trong bài viết này mình sẽ cùng các bạn xây dựng hiệu ứng cho button nhé!

1. Xây dựng giao diện

Đầu tiên các bạn tạo file index.html và tạo các button bằng đoạn mã dưới đây:

<button class="button"><span>Click </span></button>
<button class="button"><span>Hover </span></button>

2. Định dạng và thêm hiệu ứng bằng CSS

Các bạn đặt đoạn mã sau vào bên trong thẻ style:

/*Thiết lập chung cho các button*/
.button {
    position: relative;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
    margin-left: 20px;
}
/*Thiết lập hiệu ứng cho button hover*/
button#hover {
     background-color: #999933;
}
#hover  span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

#hover  span:after {
  content: '0bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

#hover:hover span {
  padding-right: 25px;
}

#hover:hover span:after {
  opacity: 1;
  right: 0;
}
/*Thiết lập hiệu ứng cho button click*/
button#click {
     background-color: #006699;
}
#click:hover {background-color: #3e8e41}

#click:active {
  background-color: #3e8e41;
  transform: translateY(5px);
}

Trong đoạn code trên, đàu tiên mình sẽ thiết lập css cho các button chung, tất cả đều là các thuộc tính cơ bản nên mình cũng không giải thích thêm, các bạn lưu ý dòng code transition-duration: 0.4s; sử dụng để thiết lập thời gian chuyển động của hiệu ứng.

Tiếp đến mình thiết lập hiệu ứng cho các loại thao tác khác nhau dựa vào id, nó cũng rất đơn giản:

• Trong phần thiết lập của hover các bạn cần lưu ý đến dòng code content: '0bb'; có tác dụng thêm vào dấu mũi tên sau thẻ span và dòng transition: 0.5s; để thiết lập qua trình thêm là 0.5s.
• Trong phần thiết lập cho button click các bạn cần lưu ý dòng code transform: translateY(5px); nó có tác dụng thêm vào một dịch chuyển theo chiều dọc 5px. nếu bạn muốn chuyển động theo chiều ngang có thể sử dụng giá trị translateX().

3. Lời kết

Vậy là mình đã cùng các bạn xây dựng xong các button với hiệu các hiệu ứng sinh động. Hi vọng nó sẽ giúp cho các bạn có thêm sự lựa chọn cho website của mình. Hẹn gặp lại các bạn trong các bài viết tiếp theo trên Zaidap.com.net.

Tham khảo: w3schools.com

DEMO