04/10/2018, 20:11

Click Effect : Tạo hiệu ứng click chuột với CSS3

Có đôi lúc chúng ta cũng cần phải tạo một vài hiệu ứng click chuột để tạo cảm giác “Pro” cho người dùng. Nếu các bạn không thích sử dụng flash hoặc các đoạn script tạo hiệu ứng, thì thử dùng hiệu ứng click mà mình chia sẻ cho các bạn trong bài viết này. Với hiệu ứng này, các bạn chỉ ...

Có đôi lúc chúng ta cũng cần phải tạo một vài hiệu ứng click chuột để tạo cảm giác “Pro” cho người dùng. Nếu các bạn không thích sử dụng flash hoặc các đoạn script tạo hiệu ứng, thì thử dùng hiệu ứng click mà mình chia sẻ cho các bạn trong bài viết này. Với hiệu ứng này, các bạn chỉ cần sử dụng CSS3 và đặc biệt là nó chạy rất mượt mà còn rất nhẹ cho trang web, blog của các bạn.

Click Effect : Tạo hiệu ứng click chuột với CSS3

Xem Demo | Download

HTML

Các bạn chèn đoạn script sau vào bên trong thẻ head để tạo icon.


<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'>

Trong bài viết này, mình tạo 3 icon để tạo hiệu ứng click chuột theo cấu trúc html như sau :


<div class="container">
  <div class="stuff">
    <div class="button" tabindex="1">
      <span class="ion-help-circled"></span>
    </div>
    <div class="button" tabindex="2">
      <span class="ion-log-in"></span>
    </div>
    <div class="button" tabindex="3">
      <span class="ion-help-buoy"></span>
    </div>
 
  </div>

CSS

Và đây là chìa khoá của hiệu ứng click, các bạn có thể copy hoặc tự sáng tạo thêm theo cách của riêng mình.

.stuff {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 0 auto;
  awidth: 70px;
  height: 70px;
  font-size: 52px;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}
.button span[class^='ion'] {
  position: relative;
}
.button:before {
  content: ';
  background-color: aliceblue;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transform: scale(0.001, 0.001);
          transform: scale(0.001, 0.001);
}
.button:focus {
  outline: 0;
  color: #fff;
}
.button:focus:before {
  -webkit-animation: effect_dylan 0.8s ease-out;
          animation: effect_dylan 0.8s ease-out;
}
@-webkit-keyframes effect_dylan {
  50% {
    -webkit-transform: scale(1.5, 1.5);
            transform: scale(1.5, 1.5);
    opacity: 0;
  }
  99% {
    -webkit-transform: scale(0.001, 0.001);
            transform: scale(0.001, 0.001);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(0.001, 0.001);
            transform: scale(0.001, 0.001);
    opacity: 1;
  }
}
@keyframes effect_dylan {
  50% {
    -webkit-transform: scale(1.5, 1.5);
            transform: scale(1.5, 1.5);
    opacity: 0;
  }
  99% {
    -webkit-transform: scale(0.001, 0.001);
            transform: scale(0.001, 0.001);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(0.001, 0.001);
            transform: scale(0.001, 0.001);
    opacity: 1;
  }
}

Mình hy vọng với hiệu ứng này, các bạn có thể ứng dụng được nhiều cho website của các bạn.

Tags: click effect css3

Chuyên Mục: Css

Bài viết được đăng bởi webmaster

Bài liên quan

Tạo hiệu ứng quảng cáo với CSS3

Việc tạo những mẫu giảm giá hoặc các thông tin khuyến mại nhằm thu hút người dùng ngay từ các nhìn đầu tiên sẽ giúp cho doanh số bán hàng của khách hàng các bạn sẽ tăng lên rõ rệt. Hôm nay mình sẽ chia sẻ cho các bạn hiệu ứng chạy quảng cáo mà chúng ta thường thấy trên các trang web bán hàng. ...

Vũ Văn Thanh viết 20:11 ngày 04/10/2018

Click Effect : Tạo hiệu ứng click chuột với CSS3

Có đôi lúc chúng ta cũng cần phải tạo một vài hiệu ứng click chuột để tạo cảm giác “Pro” cho người dùng. Nếu các bạn không thích sử dụng flash hoặc các đoạn script tạo hiệu ứng, thì thử dùng hiệu ứng click mà mình chia sẻ cho các bạn trong bài viết này. Với hiệu ứng này, các bạn chỉ ...

Tạ Quốc Bảo viết 20:11 ngày 04/10/2018

Tổng hợp hiệu ứng vòng tròn với CSS3 Transitions

Ngày hôm nay mình sẽ chia sẻ cho các bạn những hiệu ứng vòng tròn (Circle Hover Effects) với CSS transitions và 3D rotations. Bảo đảm là với những hiệu ứng này, các bạn có thể áp dụng vào chính trang web hay blog của mình, và nếu các bạn muốn nâng cao hơn về khả năng sử dụng CSS3 thì bài viết này ...

Trần Trung Dũng viết 20:03 ngày 04/10/2018

Tạo hiệu ứng Flip 3D với CSS3

Để có thể hiểu và sử dụng thành thạo CSS3 không phải là có thể trong ngày một ngày hai, ngoài việc chịu khó tìm hiểu những thuộc tính mà nó mang lại, chúng ta cần phải làm đi làm lại thật nhiều các ví dụ về các hiệu ứng mà CSS3 hỗ trợ cho chúng ta. Nhằm mang lại cho các bạn có thêm nhiều ví dụ để ...

Trịnh Tiến Mạnh viết 19:59 ngày 04/10/2018

Từng bước tạo Hiệu Ứng Bóng Nẩy Với CSS3

Chào các bạn, hôm nay chúng ta sẽ cùng nhau tìm hiểu thêm về CSS3 Gradient và Animation nhé. Trong bài viết này, mình sẽ chia sẻ cho các bạn từng bước tạo hiệu ứng bóng nẩy , đây chỉ là hiệu ứng đơn giản, tuy nhiên nó sẽ giúp các bạn có thêm kinh nghiệm sử dụng cũng như khả năng nắm vững CSS3. ...

Bùi Văn Nam viết 19:59 ngày 04/10/2018
0