Tạo button hiệu ứng hover cực đẹp và tinh tế cho blogspot

Bài viết liên quan:

Bài viết này mình sẽ giới thiệu đến các bạn mẫu button với hiệu ứng hover tuyệt đẹp và tinh tế, sử dụng hoàn toàn CSS để tạo ra hiệu ứng. Button này mình tham khảo ở một trang nước ngoài, chỉnh sửa lại một số CSS và chia sẻ lại cho các bạn. Các bạn có thể xem Demo tại đây nhé. Button này hoàn toàn bằng CSS nên mọi người cứ yên tâm không ảnh hưởng chút nào đến tốc độ load blog của các bạn.
tao button hieu ung hover cuc dep va tinh te cho blogspot

Các bước thực hiện như sau:
Bước 1: Các bạn thêm đoạn CSS sau lên thẻ ]]></b:skin>
/* button */
.bttn-success {
  color: #28b78d;
}
.bttn,
.bttn-lg,
.bttn-md,
.bttn-sm,
.bttn-xs {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  background: transparent;
  font-weight: 400;
  cursor: pointer;
  position: relative;
}
.bttn-md {
  font-size: 20px;
  font-family: inherit;
  padding: 5px 22px;
}
.bttn-unite {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  background: transparent;
  font-weight: 400;
  cursor: pointer;
  position: relative;
  font-size: 20px;
  font-family: inherit;
  padding: 5px 22px;
  z-index: 0;
  overflow: hidden;
  border: 1px solid #1d89ff;
  border-radius: 100px;
  background: #fff;
  color: #1d89ff;
  -webkit-transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), border-color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), border-color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.bttn-unite:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: #d6e3ff;
  content: '';
  opacity: 0;
  z-index: -1;
  -webkit-transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(-110%, -10%, 0) skewX(-20deg);
          transform: translate3d(-110%, -10%, 0) skewX(-20deg);
}
.bttn-unite:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: rgba(214,227,255,0.7);
  content: '';
  opacity: 0;
  z-index: -1;
  -webkit-transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(110%, -10%, 0) skewX(-20deg);
          transform: translate3d(110%, -10%, 0) skewX(-20deg);
}
.bttn-unite:hover,
.bttn-unite:focus {
  box-shadow: 0 1px 8px rgba(58,51,53,0.3);
  color: #1d89ff;
  -webkit-transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.bttn-unite:hover:before,
.bttn-unite:focus:before {
  opacity: 1;
  -webkit-transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(-50%, -10%, 0) skewX(-20deg);
          transform: translate3d(-50%, -10%, 0) skewX(-20deg);
}
.bttn-unite:hover:after,
.bttn-unite:focus:after {
  opacity: 1;
  -webkit-transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: translate3d(50%, -10%, 0) skewX(-20deg);
          transform: translate3d(50%, -10%, 0) skewX(-20deg);
}
.bttn-unite.bttn-md {
  font-size: 20px;
  font-family: inherit;
  padding: 5px 22px;
}
.bttn-unite.bttn-md:hover,
.bttn-unite.bttn-md:focus {
  box-shadow: 0 1px 8px rgba(58,51,53,0.3);
}
.bttn-unite.bttn-success {
  border-color: #28b78d;
  color: #28b78d;
}
.bttn-unite.bttn-success:hover,
.bttn-unite.bttn-success:focus {
  background: #28b78d;
  color: #fff;
}
.bttn-unite.bttn-success:before {
  background: #209271;
}
.bttn-unite.bttn-success:after {
  background: #28b78d;
}
Bước 2: Đây là đoạn code hiển thị Button của bạn. Đặt trong bài viết hoặc bất cứ đâu.
<div style="margin-bottom:7px"><button class="bttn-unite bttn-md bttn-success">Xem Demo</button></div>
Hãy tạo một Button phong cách riêng cho mình đi nào. Nếu thấy hay đừng quên để lại một comment để ủng hộ mình nhé.!.

Phan Niệm

Không muốn hoặc không thích, không tồn tại hoặc không thể! Cám ơn các bạn đã ghé thăm, chúc các bạn có những phút giây thoải mái và bổ ích trên blog của mình! Thanks for... Xem thêm về tôi

  1. Trả lời
    1. hihi, a mới viết bài này được 2 phút là lên google rồi, vui vãi :D

      Xóa
  2. Trả lời
    1. đó là 1 sự tinh tế ko phải ai cũng có :v

      Xóa
  3. Quả là một sự tinh ế có 2 không 3 :)

    Trả lờiXóa
  4. ổ ôi, blog chuyển xanh rồi :3

    Trả lờiXóa
  5. qua tết ai cug thay template hết cmnr

    Trả lờiXóa
    Trả lời
    1. Năm mới đổi mới thôi em, mà đây là temp cũ :v

      Xóa
  6. buttom đẹp quá anh niệm ơi
    à anh niệm style đặt lại LK cho em vs e cảm ơn

    Trả lờiXóa
  7. làm sao để cái ảnh nó xoay xoay vậy anh

    Trả lờiXóa
  8. Trả lời
    1. cái tên Trọng Bắt Chó - hài vãi :v

      Xóa
    2. Hôm qua vào thấy tên thằng này cười suýt sặc :))

      Xóa