Top 7 Button Hover Effects 2D Transitions

Lần update Plugin Elementor mới nhất đã cập nhật rất nhiều hiệu ứng button transitions độc đáo. Nhưng mỗi người mỗi sở thích về theme. Hiện nay, Flatsome là mẫu theme đã và đang được cộng đồng WordPress yêu thích. Bởi tính dễ sử dụng tùy biến và mượt mà như gái 18+. Nhưng mặc định mẫu theme lại hạn chế và khó tùy biến các nút button. Do đó, bài viết này Tòn xin chia sẽ css 7 Button Hover Effects 2D Transitions. Nào, cùng xem ngay bên dưới nhé!

CSS Top 7 Button Hover Effects 2D Transitions

1.Grow

/*================*/
/* 1. GROW
/*================*/

.grow-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.grow-on-hover:hover,
.grow-on-hover:focus,
.grow-on-hover:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

Ví dụ: Button Grow

2.Shrink

/*================*/
/* 2. SHRINK
/*================*/

.shrink-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.shrink-on-hover:hover,
.shrink-on-hover:focus,
.shrink-on-hover:active {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

Ví dụ: Button Shrink

3.Pulse

/*================*/
/* 3. PULSE
/*================*/

@-webkit-keyframes pulse-on-hover {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes pulse-on-hover {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
.pulse-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-on-hover:hover,
.pulse-on-hover:focus,
.pulse-on-hover:active {
  -webkit-animation-name: pulse-on-hover;
  animation-name: pulse-on-hover;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

Ví dụ: Button Pulse

4.Pulse Grow

/*================*/
/* 4. PULSE GROW
/*================*/

@-webkit-keyframes pulse-grow-on-hover {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes pulse-grow-on-hover {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.pulse-grow-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-grow-on-hover:hover,
.pulse-grow-on-hover:focus,
.pulse-grow-on-hover:active {
  -webkit-animation-name: pulse-grow-on-hover;
  animation-name: pulse-grow-on-hover;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

Ví dụ: Button Pulse Grow

5.Pulse Shrink

/*================*/
/* 5. PULSE SHRINK
/*================*/

@-webkit-keyframes pulse-shrink-on-hover {
  to {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes pulse-shrink-on-hover {
  to {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
.pulse-shrink-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-shrink-on-hover:hover,
.pulse-shrink-on-hover:focus,
.pulse-shrink-on-hover:active {
  -webkit-animation-name: pulse-shrink-on-hover;
  animation-name: pulse-shrink-on-hover;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

Ví dụ: Button Pulse Shrink

6.Push

/*================*/
/* 6. PUSH
/*================*/

@-webkit-keyframes push-on-hover {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes push-on-hover {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.push-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.push-on-hover:hover,
.push-on-hover:focus,
.push-on-hover:active {
  -webkit-animation-name: push-on-hover;
  animation-name: push-on-hover;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

Ví dụ: Button Push

7.Pop

/*================*/
/* 7. POP
/*================*/

@-webkit-keyframes pop-on-hover {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@keyframes pop-on-hover {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
.pop-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pop-on-hover:hover,
.pop-on-hover:focus,
.pop-on-hover:active {
  -webkit-animation-name: pop-on-hover;
  animation-name: pop-on-hover;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

Ví dụ: Button Pop

Cách làm

Trước tiên hãy copy toàn bộ các đoạn CSS trên đây bỏ file style.css của child-theme. Sau đó thực hiện các bước dưới đây.

Bước 1: Xác định nút yêu thích

Bước 2: Copy class của nó. Ví dụ: Button 7 ta có => pop-on-hover

Bước 3: Dán vào khung class trên theme

Chúc các bạn thành công!

Xem chi tiết