Tạo hiệu ứng giọt nước khi click vào button chỉ với css

Với CSS ta có thể tạo ra hiệu ứng giọt nước khi click vào button. Giờ đây, không cần dùng thư viện Jquery nữa nhé.

Ta tạo html button với class như sau

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 vậy thôi.

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

0 0 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest

0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận

More Post

MySQL Procedure là gì?

Procedure trong MySQL là một tập các khai báo sql được lưu trữ trong cơ sở dữ liệu(database) thực...

Dependency Injection và Service Container trong Laravel

Service Container trong Laravel như là trung tâm của một ứng dụng, có mặt mọi nơi trong dự án,...

Khám phá Hội An bằng xe đạp

Ngày nghỉ giỗ tổ Hùng Vương năm nay (21/04/2021) mình đã lên kế hoạch khám phá Hội An bằng xe...

2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x