Hướng dẫn button click transition css - nhấp vào nút chuyển đổi css

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.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

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:

Bài viết này được đăng tại [free tuts .net]

/*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

Chuyển đổi CSS

Chuyển tiếp CSS cho phép bạn thay đổi giá trị thuộc tính một cách trơn tru, trong một thời lượng nhất định.

Chuột qua phần tử bên dưới để xem hiệu ứng chuyển đổi CSS:

Trong chương này, bạn sẽ tìm hiểu về các thuộc tính sau:

• transition
• transition-delay

• /*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);
  }

  0

• /*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);
  }

  1

• /*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);
  }

  2

Hỗ trợ trình duyệt cho chuyển tiếp

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Làm thế nào để sử dụng chuyển đổi CSS?

Để tạo hiệu ứng chuyển tiếp, bạn phải chỉ định hai điều:

• thuộc tính CSS bạn muốn thêm hiệu ứng vào
• thời lượng của hiệu ứng

Lưu ý: Nếu phần thời lượng không được chỉ định, quá trình chuyển đổi sẽ không có hiệu lực, vì giá trị mặc định là 0. If the duration part is not specified, the transition will have no effect, because the default value is 0.

Ví dụ sau đây hiển thị phần tử đỏ 100px * 100px. Phần tử cũng đã chỉ định hiệu ứng chuyển tiếp cho thuộc tính chiều rộng, với thời lượng 2 giây:

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; Bối cảnh: màu đỏ; & nbsp; & nbsp; chuyển tiếp: chiều rộng 2s; }
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Hiệu ứng chuyển tiếp sẽ bắt đầu khi thuộc tính CSS được chỉ định (chiều rộng) thay đổi giá trị.

Bây giờ, chúng ta hãy chỉ định một giá trị mới cho thuộc tính chiều rộng khi người dùng thay đổi phần tử:

Lưu ý rằng khi con trỏ ra khỏi yếu tố, nó sẽ dần thay đổi trở lại với phong cách ban đầu của nó.

Thay đổi một số giá trị thuộc tính

Ví dụ sau đây thêm hiệu ứng chuyển tiếp cho cả thuộc tính chiều rộng và chiều cao, với thời lượng 2 giây cho chiều rộng và 4 giây cho chiều cao:

Chỉ định đường cong tốc độ của quá trình chuyển đổi

Thuộc tính

/*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);
}

Thuộc tính chuyển đổi thời gian chuyển đổi có thể có các giá trị sau:

• /*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);
  }

  4 - Chỉ định hiệu ứng chuyển tiếp với khởi động chậm, sau đó nhanh, sau đó kết thúc chậm (đây là mặc định)

• /*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);
  }

  5 - Chỉ định hiệu ứng chuyển tiếp với cùng tốc độ từ đầu đến cuối

• /*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);
  }

  6 - Chỉ định hiệu ứng chuyển tiếp với khởi đầu chậm

• /*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);
  }

  7 - Chỉ định hiệu ứng chuyển tiếp với kết thúc chậm

• /*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);
  }

  8 - Chỉ định hiệu ứng chuyển tiếp với khởi động chậm và kết thúc

• /*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);
  }

  9 - Cho phép bạn xác định các giá trị của riêng mình trong hàm hình khối

Ví dụ sau đây cho thấy một số đường cong tốc độ khác nhau có thể được sử dụng:

Thí dụ

#Div1 {Chuyển tiếp thời gian-function: tuyến tính; ;
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Hãy tự mình thử »

Trì hoãn hiệu ứng chuyển tiếp

Thuộc tính transition-delay chỉ định độ trễ (tính bằng giây) cho hiệu ứng chuyển tiếp.

Ví dụ sau có độ trễ 1 giây trước khi bắt đầu:

Chuyển đổi + Chuyển đổi

Ví dụ sau đây thêm hiệu ứng chuyển đổi cho phép biến đổi:

Nhiều ví dụ chuyển tiếp

Các thuộc tính chuyển đổi CSS có thể được chỉ định từng cái một, như thế này:

Thí dụ

div {& nbsp; Chuyển đổi-tài sản: chiều rộng; & nbsp; Thời gian chuyển tiếp: 2S; & nbsp; Chuyển đổi thời gian chức năng: tuyến tính; & nbsp; & nbsp; chuyển tiếp-triệt: 1S; }
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

Hãy tự mình thử »

Trì hoãn hiệu ứng chuyển tiếp

Thuộc tính transition-delay chỉ định độ trễ (tính bằng giây) cho hiệu ứng chuyển tiếp.

Ví dụ sau có độ trễ 1 giây trước khi bắt đầu: