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ầ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.

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.

Chuyên Mục: Css

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