QC xuất hiện tất cả các trang


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

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">Niệm Style</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é.!.

Hãy là người đẹp trai từ những câu nói.


Loading...