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

DEMO

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:

Code RUN
<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:

Code RUN
/*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: '\00bb';
  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: '\00bb'; 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 freetuts.net.

Tham khảo: w3schools.com

GIẢM GIÁ CUỐI TUẦN

Nhân dịp sinh nhật Cường ngày 18/08, mình giảm giá cực mạnh các khóa học fedu đến hết tuần này, các bạn tranh thủ nhé :)

Nguồn: freetuts.net

TỰ TẠO COMBO ĐỂ TIẾT KIỆM CHI PHÍ

Nếu bạn muốn tự tạo combo theo ý mình thì hãy sử dụng chức năng dưới đây, nó cho phép bạn chọn bất kì khóa học nào và cuối cùng là nhấn vào nút tạo combo, nếu mua càng nhiều thì chi phí càng rẻ.

Lập trình Backend

Lập trình Frontend

Thiết kế - Đồ họa