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. 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.
<button class="bttn-unite bttn-md bttn-success">Xem Demo</button>
<button class="bttn-unite bttn-md bttn-success">Xem Demo2</button>
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é.!.


Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Index 27/11

-
https://viettelcapquangvn.tumblr.com/ https://viettelcapquangvn.weebly.com/ https://twitter.com/viettelcapquang https://www.diigo.com/profile/lapmangviettel https://getpocket.com/@156g0d7dp5f3aAb1e0T50Z6T47Afpafr730J21D8a2G1a1Eb9787adU7o87rdf00?src=navbar https://viettelcapquangvn.wordpress.com/ https://viettelcapquangvn.blogspot.com/ https://www.blogger.com/profile/14097403780668540490 https://trello.com/viettelcapquangvn https://github.com/viettelcapquangvn https://www.linkedin.com/in/viettelcapquangvn/ https://gitlab.com/viettelcapquangvn https://en.gravatar.com/viettelcapquanghanoi https://bbpress.org/forums/profile/viettelcapquangvn/ https://www.youtube.com/channel/UCjiNoauHbT0RFo14-QoPUYw/about http://www.pinterest.com/viettelcapquangvn/ https://www.giantbomb.com/profile/viettelcapquang/about-me/ https://tawk.to/viettelcapquangvn https://viettelcapquangvn.mystrikingly.com/ https://www.behance.net/viettelcapquangvn https://dribbble.com/viettelcapquangvn/about ...
Đọc thêm

The best Side of chung cư yên ph��

-
Ở không gian phòng ngủ khác, KTS lựa chọn nội thất với chất liệu gỗ An Cường vừa đảm bảo được tính sang trọng vừa phù hợp với chi phí đầu tư của gia chủ Không chấp hành hiệu lệnh dừng phương tiện, ông Đỗ Sanh lái xe bỏ chạy khoảng 10km rồi dừng lại vác gậy tấn công cảnh sát khiến 1 chiến sĩ bị thương. Một môi trường sống với sự kết hợp tuyệt vời giữa cảnh quan thiên nhiên tươi đẹp muôn màu của cuộc sống ngay chính trong ngôi nhà của bạn. Sau khi ở anh Hải mới thấy nhiều bất cập. Chung cư này không được chủ đầu tư quan tâm, tu sửa, nhiều hạng mục xuống cấp, mỗi khi xảy ra hỏng hóc thì chính những người dân sinh sống ở đây phải tự bỏ tiền túi ra để thuê người sửa chữa. Phòng bếp đa năng với hệ thống tủ bếp và thiết bị nhà bếp cao cấp. Tủ bếp chữ I được làm bằng gỗ kết hợp đá ốp bếp nhân tạo vân mây mang lại không gian nấu nướng thật tinh tế hài hòa. Liền kề khu căn hộ Sơn Kỳ là KĐT sinh thái Celadon City quy mô 82.5 ha của Malaysia và các Trung tâm mua săm của tập đoàn Aeon Mall Nhật bản...
Đọc thêm