search

Nút bấm css

Ngày đăng: 05/01/2023
Trả lời: 0
Lượt xem: 114

Với CSS, ta có thể tạo ra hiệu ứng nước khi nhấp vào nút. Giờ đây, không cần sử dụng thư viện Jquery nữa nhé

Ta tạo nút html với lớp như sau

Show
class="btn ripple"

Đây là đoạn code css

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}

Đơn giản thôi

Bạn có thể xem full code tại đây

Các nút tải là các nút được thêm các biểu tượng tải để có thể thực hiện thao tác của người dùng đang được thực hiện. Ứng dụng mà chúng ta hay gặp nhất của nút tải có thể là trong các bước tải xuống bất kỳ tài liệu nào từ internet. Trong bài viết này mình sẽ hướng dẫn các bạn tạo nút tải đơn giản với CSS

Nút bấm css

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

1. Build interface

Đầu tiên là phần giao diện được hiển thị, các bạn tạo tệp 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
39 và tạo các thành phần bằng đoạn mã dưới đây

Mã CHẠY


  
Freetuts.net hướng dẫn tạo loading button

Ở đây mình sẽ tạo ra các nút để trong bước sau ta sẽ gán các icon vào cho mình, các bạn lưu ý giữ nguyên tên lớp nhé vì nó sẽ quyết định icon hiển thị lí do mình sẽ giải thích ở phần sau, cùng chuyển

2. Thêm CSS để định dạng các thành phần

Trong bước này, chúng tôi sẽ sử dụng CSS để định dạng cho các thành phần đã tạo ở trên, đầu tiên bạn đặt đoạn mã sau trong thẻ để nhúng tệp 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
40

Bài viết này đã được đăng tại [free tuts. bọc lưới]

Mã số

Nếu như các bạn chưa biết thì font-awesome là một bộ phông chữ biểu tượng, nó sẽ giúp chúng ta nhúng các biểu tượng vào trang web mà không cần sử dụng đến hình ảnh, liên kết tải font-awesome mình sẽ đặt ở cuối bài viết, . Việc sử dụng phông chữ tuyệt vời để tạo biểu tượng chính là lí do mà mình yêu cầu các bạn giữ nguyên tên các lớp ở bước 1

Tiếp theo, các bạn đặt đoạn mã CSS này vào bên trong kiểu thẻ nhé

Mã CHẠY

.container {
  width: 500px;
  margin: auto;
}
/* Định dạng cho button */
.buttonload {
    background-color: #4CAF50; /* Màu nền */
    border: none; /* không hiển thị border */
    color: white; /* Màu chữ */
    padding: 12px 16px; /* thêm padding */
    font-size: 16px /* cỡ chữ */
}
.fa {
    margin-left: -12px;
    margin-right: 8px;
}

Đoạn mã này rất đơn giản và bản thân đã ghi chú rõ ràng trong mã nguồn

Vì vậy là xong, giờ các bạn chạy file 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
39 để xem kết quả nhé

3. Lời kết

Qua bài viết này mình đã cùng các bạn tạo thành công một nút Tải, nó sẽ giúp bạn có thêm lựa chọn khi hiển thị các nút trên trang web của mình, Nếu có bất kỳ thắc mắc nào các bạn có thể để lại trong phần bình luận . bọc lưới

Bài viết này là một phần của bài viết [JavaScript] Bài 13 - Event & Listener trong Series Tự Học Lập Trình Web Một Cách Thật Tự Nhiên

Trong bài viết này, chúng tôi sẽ cùng xây dựng một thanh điều hướng phụ đơn giản thường được đặt ở bên cạnh khối hiển thị nội dung chính của trang web. Bên cạnh đó, chúng ta sẽ thử bổ sung một tính năng đơn giản giúp người dùng lọc nhanh danh sách các liên kết bằng cách nhập từ khóa vào một ô nhập liệu ở phần đầu của thanh điều hướng

Xem kết quả dự kiến

1. Chuẩn bị mã HTML

Vẫn như bình thường, chúng ta sẽ khởi động với một khuôn mẫu HTML cơ bản chưa có nội dung.

Nút bấm css

doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <title>Sidenav w/ Filtertitle>
   <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
   
   <link rel="stylesheet" href="sidenav.css">
head>
<body>
   
   
   <script src="sidenav.js">script>
body>
html>

Trước hết chúng ta cần dàn bố cục chính của trang web để có thể xác định được vị trí mà thanh điều hướng phụ 

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
8 của chúng ta sẽ được đặt trên trang. Ở đây để tiết kiệm thời gian tiết kiệm thời gian cho nội dung chính cần quan tâm là khối 
   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
8 nên chúng ta sẽ chọn một bố cục đơn giản với -

  • Một thanh điều hướng chính 
       /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
    0
  • Một khối hiển thị nội dung chính 
       /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
    1
  • Sau đó tới thanh điều hướng 
       /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
    8
  • Và cuối cùng là phần chân trang web 
       /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
    3
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
2

Cụ thể hơn về khối 

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
4, chúng ta có các thành phần chính là -

  • Một 
       /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
    5 dữ liệu 
       /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
    6 được sử dụng để người dùng nhập từ khóa và lọc nhanh các liên kết liên quan
  • Các danh sách liên kết 
       /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
    7 tương ứng với các mục nội dung của trang web

Và để thiết lập khoảng cách giữa các thành phần với các khung 

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
4 được đồng đều thì chúng ta sẽ đặt tất cả vào một chung tiện ích chung 
   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
9

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
9

Tại đây 

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
5 nhập từ khóa 
   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
6 của chúng ta sẽ bao gồm 2 thành phần là một ô dữ liệu 

  
Freetuts.net hướng dẫn tạo loading button
22 và một nút nhấn 

  
Freetuts.net hướng dẫn tạo loading button
23 để xóa nội dung đã nhập. Tuy nhiên, chúng tôi không sử dụng thẻ 

  
Freetuts.net hướng dẫn tạo loading button
24 mà sử dụng 

  
Freetuts.net hướng dẫn tạo loading button
25 vì không cần chuyển yêu cầu của người dùng tới máy chủ web nào cả.
Nút bấm css

Tiếp theo là các danh sách liên kết 

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
7 với mỗi danh sách sẽ bao gồm một tiêu đề của hạng mục nội dung 

  
Freetuts.net hướng dẫn tạo loading button
27 và các liên kết tới các bài viết 

  
Freetuts.net hướng dẫn tạo loading button
28. Ở đây chúng ta sử dụng thuộc tính 

  
Freetuts.net hướng dẫn tạo loading button
29 để gắn các từ khóa của bài viết với các liên kết. Và khi người dùng nhập từ khóa để tìm kiếm, nếu từ khóa vừa nhập xuất hiện trong tiêu đề của liên kết hoặc trong
00 thì chúng ta sẽ để liên kết hiển thị bình thường. Trong trường hợp còn lại thì các liên kết sẽ được ẩn đi để rút ngắn danh sách và người dùng có thể lọc được bài viết liên quan

Bạn có thể tạo ra nhiều danh sách liên kết để có thể dễ dàng chạy thử tính năng của bộ lọc. Dưới đây là các tập tin liên kết mà bạn có thể sao chép/dán để sử dụng

1

Nút bấm css

2. Viết code CSS cho. bên lề

Ở đây chúng ta vẫn sẽ xuất với thao tác

01 căn bản

   /* Reset CSS */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

2. 1 Chỉnh sửa bố cục chính của trang

Để nhanh chóng điều chỉnh bố cục chính của trang web và định hình khu vực sử dụng khối điều hướng phụ 

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
4 thì chúng ta có thể sử dụng nhóm thuộc tính
03. Từ kết quả dự kiến, chúng tôi sẽ đặt màu nền tối cho thanh điều hướng
04 và khối chân trang web
05;

________số 8

Nút bấm css


  
Freetuts.net hướng dẫn tạo loading button
2

Nút bấm css

2. 2 Filter. bộ lọc sidenav

Để bắt đầu viết code cho khối 

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
4, chúng ta sẽ tạo 
.container {
  width: 500px;
  margin: auto;
}
/* Định dạng cho button */
.buttonload {
    background-color: #4CAF50; /* Màu nền */
    border: none; /* không hiển thị border */
    color: white; /* Màu chữ */
    padding: 12px 16px; /* thêm padding */
    font-size: 16px /* cỡ chữ */
}
.fa {
    margin-left: -12px;
    margin-right: 8px;
}
33 cơ bản cho 
   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
9 sử dụng chung trong các thành phần của trang web. Vùng chứa này thường được sử dụng cho tất cả các thành phần của trang web để tạo khoảng 
.container {
  width: 500px;
  margin: auto;
}
/* Định dạng cho button */
.buttonload {
    background-color: #4CAF50; /* Màu nền */
    border: none; /* không hiển thị border */
    color: white; /* Màu chữ */
    padding: 12px 16px; /* thêm padding */
    font-size: 16px /* cỡ chữ */
}
.fa {
    margin-left: -12px;
    margin-right: 8px;
}
33 cơ bản nhằm phân tách nội dung từ 2 cạnh của vùng chứa cha ở bên ngoài

Trong trường hợp khác, nếu vùng chứa cha có chiều rộng 

.container {
  width: 500px;
  margin: auto;
}
/* Định dạng cho button */
.buttonload {
    background-color: #4CAF50; /* Màu nền */
    border: none; /* không hiển thị border */
    color: white; /* Màu chữ */
    padding: 12px 16px; /* thêm padding */
    font-size: 16px /* cỡ chữ */
}
.fa {
    margin-left: -12px;
    margin-right: 8px;
}
36, ví dụ như phần hiển thị nội dung bài viết
07, thì vùng chứa này còn được sử dụng để giới hạn độ rộng của dòng chữ trong khoảng 
.container {
  width: 500px;
  margin: auto;
}
/* Định dạng cho button */
.buttonload {
    background-color: #4CAF50; /* Màu nền */
    border: none; /* không hiển thị border */
    color: white; /* Màu chữ */
    padding: 12px 16px; /* thêm padding */
    font-size: 16px /* cỡ chữ */
}
.fa {
    margin-left: -12px;
    margin-right: 8px;
}
38, giúp đảm bảo chắc chắn người dùng sẽ có

0

First header is a filter 

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
6. Các nhiệm vụ cần thực hiện của chúng ta về cơ bản vẫn chia làm 2 phần như trên

  • Thiết lập màu sắc, kích thước và điều chỉnh vị trí của các phần tử
  • Thiết lập phông chữ cho nội dung và canh chỉnh vị trí của nội dung

Phần đầu tiên của công việc thì chúng ta cần đảm bảo độ rộng của ô nhập dữ liệu 


  
Freetuts.net hướng dẫn tạo loading button
22 và nút nhấn 

  
Freetuts.net hướng dẫn tạo loading button
23 là 
doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <title>Sidenav w/ Filtertitle>
   <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
   
   <link rel="stylesheet" href="sidenav.css">
head>
<body>
   
   
   <script src="sidenav.js">script>
body>
html>
32 của container cha 
   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
9. Do nút nhấn 

  
Freetuts.net hướng dẫn tạo loading button
23 có nội dung rất ngắn, chúng tôi sẽ chỉ định chiều rộng và chiều cao cố định. Sau đó sử dụng hàm 
doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <title>Sidenav w/ Filtertitle>
   <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
   
   <link rel="stylesheet" href="sidenav.css">
head>
<body>
   
   
   <script src="sidenav.js">script>
body>
html>
35 để thiết lập độ rộng tương quan cho ô nhập liệu 

  
Freetuts.net hướng dẫn tạo loading button
23

Tuy nhiên, còn một vấn đề nhỏ nữa, đó là 2 thành phần này đều là các khối 

doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <title>Sidenav w/ Filtertitle>
   <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
   
   <link rel="stylesheet" href="sidenav.css">
head>
<body>
   
   
   <script src="sidenav.js">script>
body>
html>
37 và với kích thước phông chữ mặc định, trình duyệt web sẽ đặt 2 khối này cách nhau một khoảng nhỏ khoảng 
doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <title>Sidenav w/ Filtertitle>
   <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
   
   <link rel="stylesheet" href="sidenav.css">
head>
<body>
   
   
   <script src="sidenav.js">script>
body>
html>
38. Do đó chúng ta cần giảm khoảng cách này đi bằng cách sử dụng thuộc tính 
doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <title>Sidenav w/ Filtertitle>
   <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
   
   <link rel="stylesheet" href="sidenav.css">
head>
<body>
   
   
   <script src="sidenav.js">script>
body>
html>
39 cho 
   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
6 hoặc 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
201

.container {
  width: 500px;
  margin: auto;
}
/* Định dạng cho button */
.buttonload {
    background-color: #4CAF50; /* Màu nền */
    border: none; /* không hiển thị border */
    color: white; /* Màu chữ */
    padding: 12px 16px; /* thêm padding */
    font-size: 16px /* cỡ chữ */
}
.fa {
    margin-left: -12px;
    margin-right: 8px;
}
3

Sau khi đã có một khối 

   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
6 lấp đầy chiều rộng của container cha bên ngoài, chúng ta cần thực hiện thiết lập phong cách hiển thị và canh chỉnh cho nội dung chữ bên trong ô nhập liệu và nhấn nút

doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <title>Sidenav w/ Filtertitle>
   <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
   
   <link rel="stylesheet" href="sidenav.css">
head>
<body>
   
   
   <script src="sidenav.js">script>
body>
html>
3

Nút bấm css

Ngoài ra, chúng ta còn một lưu ý quan trọng khác đó là cần phải tạo thêm 1 thẻ trạng thái 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
207 để biểu thị cho trạng thái liên kết được ẩn đi khi không phù hợp với từ khóa người dùng nhập vào bộ lọc

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
20

Nút bấm css

3. Viết mã JavaScript cho. bộ lọc sidenav

Trước khi bắt tay vào viết mã, chúng ta cần lưu lại một vài yếu tố chính của tính năng này.

Nút bấm css

  • Đối với ô nhập liệu 
    
  
    Freetuts.net hướng dẫn tạo loading button
    22, khi người dùng nhấn một phím nào đó để nhập một chữ cái, chúng ta cần thực hiện bộ lọc danh sách ban đầu để ẩn đi những liên kết không phù hợp. Và mỗi khi người dùng xóa một chữ cái, chúng ta cũng cần thực hiện thao tác lọc danh sách ban đầu để hiển thị lại những liên kết phù hợp với từ khóa
  • Đối với nút nhấn 
    
  
    Freetuts.net hướng dẫn tạo loading button
    23 dùng để xóa nội dung trong ô nhập liệu, chúng ta chỉ cần hiển thị lại đầy đủ tất cả các danh sách. Hoặc một cách khác là chúng ta cứ xóa nội dung trong ô nhập liệu sau đó kích hoạt một sự kiện nhấn phím cho 
    
  
    Freetuts.net hướng dẫn tạo loading button
    22 để giả định là người dùng thao tác nhấn phím xóa ký tự. Như vậy cũng hợp lý phải không?
    Nút bấm css

Việc viết mã xử lý nút nhấn 


  
Freetuts.net hướng dẫn tạo loading button
23 thì chắc chắn là không có gì để chúng ta phải mờ mắt quá nhiều ở thời điểm hiện tại. Tuy nhiên, hãy nói thêm một chút về đối tượng chính ở đây là ô nhập liệu 

  
Freetuts.net hướng dẫn tạo loading button
22

Giả sử chúng ta đang ở thời điểm người dùng đã nhập một vài từ khóa nào đó và đã có khoảng 1/2 số liên kết không phù hợp được ẩn đi. Bây giờ khi người dùng nhấn thêm một phím nào đó để xóa hoặc thêm một ký tự, thì mã của chúng ta sẽ cần thực hiện những công việc sau -

  • Truy vấn tất cả các liên kết 
    
  
    Freetuts.net hướng dẫn tạo loading button
    28 - bao gồm cả những liên kết đang hiện và đang ẩn
  • Lọc ra các liên kết phù hợp với đoạn từ khóa đang có trong ô nhập liệu 
    
  
    Freetuts.net hướng dẫn tạo loading button
    23
  • Tiếp tục lọc ra các liên kết đang bị ẩn trong kết quả phù hợp của tập tin
  • Sau đó xóa lớp 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    207 để các liên kết này được hiển thị lại

Một cách xử lý khác là chúng ta sẽ làm việc với 2 nhóm liên kết 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
218 và 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
219 riêng biệt -

  • Truy vấn 2 nhóm liên kết 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    218 và 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    219 lưu vào 2 biến khác nhau
  • Ở nhóm liên kết đang ẩn, lọc ra những liên kết phù hợp với đoạn từ khóa
  • Xoá lớp 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    207 để cho các liên kết phù hợp quay trở lại
  • Ở nhóm liên kết đang hiện hành, lọc ra những liên kết 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    223 phù hợp với đoạn từ khóa
  • Thêm lớp 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    207 để ẩn các liên kết 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    223 phù hợp đi

Cho dù là phương án xử lý nào đi chăng nữa thì chúng ta vẫn sẽ phải làm việc với đầy đủ danh sách liên kết ban đầu. Và thực hiện tới 2 lần lặp để kiểm tra tính phù hợp của các liên kết với đoạn từ khóa trong 


  
Freetuts.net hướng dẫn tạo loading button
22. Nguyên do là cả 2 cách xử lý vấn đề này đều xuất phát từ thao tác khách quan tác động lên trạng thái của tập hợp các liên kết 

  
Freetuts.net hướng dẫn tạo loading button
28

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
23

Bây giờ chúng ta hãy thử nhìn vấn đề theo một cách khác. Giả sử chúng ta có thể chia khối công việc cần làm để các liên kết tự thực hiện chứ không tác động chỉnh sửa có thể xen vào từ đâu đó khác. Khi có một sự kiện người dùng được phát động, mỗi liên kết sẽ tự kiểm tra xem nội dung của mình có phù hợp với đoạn từ khóa hay không. Và sau đó tự điều chỉnh trạng thái 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
228 một cách chủ quan. Như vậy sẽ thật tuyệt.
Nút bấm css

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
24

Nếu có thể viết mã phát triển logic chủ quan cho các liên kết như vừa nói, chúng ta sẽ không cần phải sàng lọc các kết quả tập tin nhiều lần để phân loại các liên kết. Lối suy nghĩ duy nhất này có vẻ như không yêu cầu khả năng phỏng đoán kết quả lọc các danh sách và dường như sẽ có ít khả năng để chương trình xảy ra lỗi hơn. Vì vậy chúng ta sẽ thử viết code xử lý theo hướng tư duy vừa thảo luận nhé - 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
229
Nút bấm css

3. 1 Tổng quan các hàm xử lý chính

Đầu tiên chúng ta sẽ chuẩn bị các phần khung của chương trình -

  • Các liên kết 
    
  
    Freetuts.net hướng dẫn tạo loading button
    28 sẽ được gắn hàm xử lý sự kiện 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    231 để tự kiểm tra từ khóa và cập nhật trạng thái hiển thị mỗi khi nhận được thông báo 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    232
  • Dữ liệu đầu vào 
    
  
    Freetuts.net hướng dẫn tạo loading button
    22 sẽ được gắn hàm xử lý 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    234 để thông báo sự kiện cho các liên kết là 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    232
  • Nút nhấn 
    
  
    Freetuts.net hướng dẫn tạo loading button
    23 sẽ được gắn hàm xử lý 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    237 để khi nhận được nhấp chuột, hãy xóa nội dung trong ô nhập liệu. Sau đó gắn thêm hàm xử lý 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    234 để thông báo sự kiện cho các liên kết là 
    .btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
    232
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
25

Như vậy là chúng ta đã có phần khung chương trình với 3 hàm xử lý sự kiện chính được gắn vào các phần tử tương ứng. Ở đoạn gắn hàm xử lý sự kiện cho các liên kết, chúng ta đã tạo ra một tên sự kiện mới là 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
240. Và hàm xử lý sự kiện của các liên kết sẽ được kích hoạt nếu như chúng ta gửi tới các liên kết một đối tượng 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
241

Tức là các sự kiện click chuột 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
242 do kiểu duyệt tạo ra tại nút nhấn 

  
Freetuts.net hướng dẫn tạo loading button
23, và các sự kiện nhấn và nhấn phím 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
244 tại vị trí của ô đầu vào 

  
Freetuts.net hướng dẫn tạo loading button
22, sẽ là mã của chúng ta phiên giao dịch thành một sự kiện duy nhất. .
Nút bấm css

3. 2 Viết mã cho các hàm xử lý sự kiện

Bây giờ chúng ta sẽ viết mã chi tiết cho các hàm xử lý sự kiện. Có thể là chúng ta nên xuất phát từ phiên dịch các sự kiện chức năng sang 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
240 đi.
Nút bấm css

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
26

Rồi. xong. Ở đây trong phần thân hàm, chúng ta không quan tâm đến sự kiện 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
249 nhận được là kiểu gì, 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
250 hay 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
251. Thay vào đó chỉ đơn giản là bất kỳ khi nào hàm xử lý này được kích hoạt ở vị trí ô nhập dữ liệu 

  
Freetuts.net hướng dẫn tạo loading button
22 hoặc nút nhấn 

  
Freetuts.net hướng dẫn tạo loading button
23 thì chúng ta hiểu rằng 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
254. Mặc dù nội dung đó có thể thay đổi hoặc không nhưng công việc của hàm xử lý này chỉ đơn giản là thông báo cho 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
255 rằng 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
240

Kế hoạch sẽ là hàm 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
237 do nhiệm vụ này thực hiện rất đơn giản. Ở đây chúng ta sẽ chỉ xóa nội dung của ô nhập liệu chứ không thực hiện bất kỳ thao tác nào khác. Công việc thông báo cho các liên kết là nhiệm vụ của hàm 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
234.
Nút bấm css

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
27

Cuối cùng là hàm xử lý các sự kiện quan trọng nhất 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
231 - Mỗi liên kết sẽ tự động tới 

  
Freetuts.net hướng dẫn tạo loading button
22 để xem chuỗi từ khóa trong ô nhập liệu và kiểm tra xem mình có phù hợp không; 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
28

Ở cấp độ của hàm 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
261, chúng ta vẫn thường xử lý việc phân tích sự kiện và đưa ra quyết định về công việc cần thực hiện tiếp theo. Sau đó công việc cần thực hiện bằng cách thao tác trên các 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
262 nên được xử lý chi tiết ở các hàm tác vụ phụ 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
263 và các hàm tiện ích 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
264. Và ở đây chúng ta cũng sẽ thực hiện như vậy với một khung xử lý chính và ủy thác 2 thao tác 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
228 cho 2 hàm 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
266

3. 3 Viết mã cho các chức năng xử lý nhiệm vụ phụ

Tuy nhiên, tại vị trí công việc được ủy thác xuống 2 hàm 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
266, chúng ta không biết liên kết đó 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
218 hay 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
219; 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
29

3. 4 Viết các hàm tiện ích hỗ trợ

Cuối cùng là viết các hàm hỗ trợ đã được gọi nhưng chưa có mã phát triển.

Nút bấm css

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
90

4. Total end code of a sidenav đơn giản

Xin chúc mừng. Bạn đã hoàn thành công việc xây dựng một thanh điều hướng phụ đơn giản có hỗ trợ tính năng lọc nhanh các danh sách liên kết. Để hoàn thiện hơn nữa, bạn có thể xử lý thêm mã 

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
270 cho 
   /* Templating */

body {
   /* --- aligning */
   display: grid;
   grid-template:
      "topnav  topnav "
      "sidenav main   "
      "footer  footer "
      / 300px  1fr;
}

.topnav {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   width: 100%;
   height: 54px;
   /* --- positioning */
   grid-area: topnav;
}

.sidenav {
   /* --- coloring */
   background: white;
   border-right: 2px solid lightgray;
   /* --- positioning */
   grid-area: sidenav;
}

.main {
   /* --- coloring */
   background: white;
   /* --- positioning */
   grid-area: main;
}

.footer {
   /* --- coloring */
   color: white;
   background: black;
   /* --- sizing */
   height: 450px;
   /* --- positioning */
   grid-area: footer;
}
4. Công việc này đã quá quen thuộc từ khi chúng ta cùng xây dựng một thanh điều hướng 
.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}
270 cách đây rất lâu, khi mà chúng ta vẫn chưa biết đến JavaScript.
Nút bấm css

Mục đích của chúng ta trong bài viết này là thử phát triển logic xử lý sự kiện theo phương thức hành động chủ quan đứng từ vị trí của các phần tử HTML cần phải thay đổi để đáp ứng với sự kiện. Thay vì xử lý theo phương thức hành động khách quan tác động lên các phần tử HTML cần thay đổi từ bên ngoài

programming css

Bài Viết Liên Quan

Kiểm tra là tam giác loại gì trong c năm 2024
Kiểm tra là tam giác loại gì trong c năm 2024

là ai Dấu trong C++
Nữ sinh năm 1969 là mệnh gì năm 2024
Nữ sinh năm 1969 là mệnh gì năm 2024

là ai
Bài tập tài chính doanh nghiệp hiện đại ueh năm 2024
Bài tập tài chính doanh nghiệp hiện đại ueh năm 2024

mẹo hay Khỏe Đẹp Bài tập
Việc làm nhập liệu kế toán tại nhà năm 2024
Việc làm nhập liệu kế toán tại nhà năm 2024

mẹo hay Xây Đựng Nhà
Đề thi môn toán lớp 5 giữa học kì 1 năm 2024
Đề thi môn toán lớp 5 giữa học kì 1 năm 2024

mẹo hay Học Tốt Học
Chưa được gia công quá mức cán nguội là gì năm 2024
Chưa được gia công quá mức cán nguội là gì năm 2024

là ai Hỏi Đáp Là gì
Đọc chuyện người con gái nam xương ngữ văn 9 năm 2024
Đọc chuyện người con gái nam xương ngữ văn 9 năm 2024

mẹo hay Giới Tính Gái
Fix lỗi thường xuyên mất mạng cho laptop năm 2024
Fix lỗi thường xuyên mất mạng cho laptop năm 2024

mẹo hay Top List Top Công Nghệ Laptop
Bệnh viêm đại tràng có triệu chứng như thế nào năm 2024
Bệnh viêm đại tràng có triệu chứng như thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào
Hóa đơn điện tử viettel xuất dạnh song ngữ năm 2024
Hóa đơn điện tử viettel xuất dạnh song ngữ năm 2024

mẹo hay Khỏe Đẹp Son Sinvoice Viettel Sininvoice Z invoice
Lọ mực trong tiếng anh đọc là gì năm 2024
Lọ mực trong tiếng anh đọc là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh
Casch convert file wword do bị lỗi font chữ năm 2024
Casch convert file wword do bị lỗi font chữ năm 2024

mẹo hay Công Nghệ File
Bài 2 trang 88 sgk toán 10 hình học năm 2024
Bài 2 trang 88 sgk toán 10 hình học năm 2024

mẹo hay Học Tốt Học
Biến động nào làm cho giá cổ phiếu giảm xuống năm 2024
Biến động nào làm cho giá cổ phiếu giảm xuống năm 2024

mẹo hay Cryto Giá
Nha phan phoi doc quyen tiếng anh là gì năm 2024
Nha phan phoi doc quyen tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh
Làm thế nào để giọng hát hay hơn năm 2024
Làm thế nào để giọng hát hay hơn năm 2024

mẹo hay Hỏi Đáp Thế nào
Andree right hand tên thật là gì năm 2024
Andree right hand tên thật là gì năm 2024

là ai Hỏi Đáp Là gì
47 nguyễn văn bá phường bình thọ quận thủ đức năm 2024
47 nguyễn văn bá phường bình thọ quận thủ đức năm 2024

mẹo hay
Các lá thư xin lỗi bằng tiếng anh năm 2024
Các lá thư xin lỗi bằng tiếng anh năm 2024

mẹo hay Học Tốt Tiếng anh
Phòng quản lý đô thị tiếng anh là gì năm 2024
Phòng quản lý đô thị tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh

Quảng Cáo

Có thể bạn quan tâm

Mẫu dự án bảo tồn di sản văn hóa năm 2024
1 ngày trước . bởi ProtectedCovering
Hạn mức tín dụng của thẻ tín dụng là gì năm 2024
1 ngày trước . bởi BulbousIllustrator
Thuốc uống trắng da của nhật loại nào tốt năm 2024
1 ngày trước . bởi TremblingGrandeur
Đại học văn hiến xét tuyển học bạ 2023 năm 2024
1 ngày trước . bởi DefeatedScholarship
Quan trắc môi trường lao động tiếng anh là gì năm 2024
1 ngày trước . bởi AppropriateFooting
Gốm là văn hóa vật chất hay tinh thần năm 2024
1 ngày trước . bởi BloodyBlather
Bài tập kanji look and learn ban tieng viet năm 2024
1 ngày trước . bởi RapidEyewitness
Lắp đặt thiết bị công trìnhtiếng anh là gì năm 2024
1 ngày trước . bởi PowerlessAdaptation
Khám gai cột sống ở bệnh viện nào năm 2024
1 ngày trước . bởi ConstantKangaroo
Mơ đi vay tiền là điềm gì năm 2024
1 ngày trước . bởi CompositionalRacism

Toplist được quan tâm

#1
Top 6 bản thân em phải làm gì để phòng chống hiv/aids 2023
5 tháng trước
#2
Top 7 số 20 gồm 2 và 0 đúng hay sai 2023
5 tháng trước
#3
Top 7 địa lý lớp 6 bài 19: lớp đất và các nhân tố hình thành đất một số nhóm đất điển hình trang 178 2023
5 tháng trước
#4
Top 7 h thực hiện chủ trương đường lối chính sách của đảng pháp luật của nhà nước 2023
5 tháng trước
#5
Top 6 on tập tiếng việt lớp 7 học kĩ 2 violet 2023
5 tháng trước
#6
Top 7 trung du và miền núi bắc bộ có thế mạnh nổi bật về luyện kim đen 2023
5 tháng trước
#7
Top 8 mơ thấy có người to tình với mình 2023
5 tháng trước
#8
Top 6 nước yến cao cấp yến sào thiên hoàng 2023
5 tháng trước
#9
Top 7 ví dụ về quyết định hành chính nhà nước 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Chiều rộng cơ sở của xe ô tô là gì năm 2024
2 ngày trước . bởi DisjointedCemetery
Năm 1999 là năm con gì và mệnh gì năm 2024
2 ngày trước . bởi BelievablePublicity
Nhiệm vụ của trồng trọt là gì năm 2024
1 tuần trước . bởi AcridLiberation
Estee lauder advanced night repair intensive recovery ampoules là gì năm 2024
1 tuần trước . bởi ExtraordinaryCylinder
Cao xuân tài là người theo đạo gì năm 2024
6 ngày trước . bởi PlayfulViability
Bánh trung thu văn hòa lạc ở tphcm năm 2024
20 giờ trước . bởi ThrivingDelegation
Lỗi iphone ko vào được imessage bằng số điện thoại năm 2024
3 ngày trước . bởi TransatlanticAversion
Beaune du chateau premier cru 2023 là nho gì năm 2024
1 tuần trước . bởi RetrospectiveRapidity
Nước tiểu có tên hóa học là gì năm 2024
1 ngày trước . bởi InstantBoldness
Vi khuẩn nội bào là gì năm 2024
2 ngày trước . bởi ComplexScrimmage

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Hỏi Đáp Inc.