Home Button Code CSS CSS3 Hot

CSS3 Hiệu ứng button đẹp

tác giả Võ Hữu Nhân
xuất bản lúc 02:45 ngày 07/05/2018

Demo

Đầu tiên chèn css dưới vào:

.centerer {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.wrap {
  width: 50%;
  float: left;
}

[class^="btn-"] {
  position: relative;
  display: block;
  margin: 20px auto;
  width: 100%;
  height: 80px;
  max-width: 250px;
  text-transform: uppercase;
  overflow: hidden;
  border: 1px solid currentColor;
}

.btn-0 {
  color: #9a3789;
}
.btn-0:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 80px;
  background: #520c46;
}
.btn-0:hover {
  color: #e1c4dc;
}
.btn-0:hover:before {
  width: 250px;
}
.btn-0:active {
  background: #881474;
}

.btn-1 {
  color: #be876e;
}
.btn-1:after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: #6b4432 transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.btn-1:hover {
  color: #ecdcd4;
}
.btn-1:hover:after {
  border-width: 330px 330px 0 0;
}
.btn-1:active {
  background: #b27254;
}

.btn-1-2 {
  color: #bc4b41;
}
.btn-1-2:before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent transparent #6a1a13;
  position: absolute;
  bottom: 0;
  left: 0;
}
.btn-1-2:after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent #6a1a13 transparent;
  position: absolute;
  right: 0;
  bottom: 0;
}
.btn-1-2:hover {
  color: #ebcac7;
}
.btn-1-2:hover:before {
  border-width: 206.25px 0 0 206.25px;
}
.btn-1-2:hover:after {
  border-width: 0 0 206.25px 206.25px;
}
.btn-1-2:active {
  background: #b02b20;
}

.btn-2 {
  color: #48a6b1;
}
.btn-2:before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent transparent #185a62;
  position: absolute;
  bottom: 0;
  left: 0;
}
.btn-2:after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent #185a62 transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
}
.btn-2:hover {
  color: #c9e5e8;
}
.btn-2:hover:before {
  border-width: 165px 0 0 165px;
}
.btn-2:hover:after {
  border-width: 0 165px 165px 0;
}
.btn-2:active {
  background: #2896a3;
}

.btn-3 {
  color: #ad96a0;
}
.btn-3:before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent transparent #5f4f56;
  position: absolute;
  bottom: 0;
  left: 0;
}
.btn-3:after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent #5f4f56 transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
}
.btn-3 span:before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent #5f4f56 transparent;
  position: absolute;
  right: 0;
  bottom: 0;
}
.btn-3 span:after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: #5f4f56 transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.btn-3:hover {
  color: #e7e0e3;
}
.btn-3:hover:before {
  border-width: 165px 0 0 165px;
}
.btn-3:hover:after {
  border-width: 0 165px 165px 0;
}
.btn-3:hover span:before {
  border-width: 0 0 165px 165px;
}
.btn-3:hover span:after {
  border-width: 165px 165px 0 0;
}
.btn-3:active {
  background: #9e838f;
}

.btn-4 {
  color: #8d53b3;
}
.btn-4:after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent #492064 transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
}
.btn-4:before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent transparent #492064;
  position: absolute;
  bottom: 0;
  left: 0;
}
.btn-4:before, .btn-4:after {
  border-color: #492064;
}
.btn-4 span:after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: #492064 transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.btn-4 span:before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent #492064 transparent;
  position: absolute;
  right: 0;
  bottom: 0;
}
.btn-4 span:before, .btn-4 span:after {
  border-color: #492064;
}
.btn-4:hover {
  color: #decde9;
}
.btn-4:hover:before {
  border-width: 20px 62.5px;
}
.btn-4:hover:after {
  border-width: 20px 62.5px;
}
.btn-4:hover span:before {
  border-width: 20px 62.5px;
}
.btn-4:hover span:after {
  border-width: 20px 62.5px;
}
.btn-4:active {
  background: #7935a6;
}

.btn-5 {
  color: #808695;
}
.btn-5:after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent #3f444e transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
}
.btn-5:before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent transparent #3f444e;
  position: absolute;
  bottom: 0;
  left: 0;
}
.btn-5:hover {
  color: #dadce0;
}
.btn-5:hover:before, .btn-5:hover:after {
  border-width: 80px 262.5px;
}
.btn-5:active {
  background: #697182;
}

.btn-6 {
  color: #80629f;
}
.btn-6 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #402a55;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: width 0.4s, height 0.4s;
  transition: width 0.4s, height 0.4s;
  z-index: -1;
}
.btn-6:hover {
  color: #dad1e3;
}
.btn-6:hover span {
  width: 562.5px;
  height: 562.5px;
}
.btn-6:active {
  background: #6a468e;
}

.btn-7 {
  color: #27692b;
}
.btn-7:before, .btn-7:after,
.btn-7 span:before,
.btn-7 span:after {
  content: '';
  position: absolute;
  top: 0;
  width: 63.5px;
  height: 0;
  background: #012f04;
}
.btn-7:before {
  left: 0;
}
.btn-7:after {
  left: 125px;
}
.btn-7 span:before, .btn-7 span:after {
  top: auto;
  bottom: 0;
}
.btn-7 span:before {
  left: 62.5px;
}
.btn-7 span:after {
  left: 187.5px;
}
.btn-7:hover {
  color: #c0d3c1;
}
.btn-7:hover:before, .btn-7:hover:after,
.btn-7:hover span:before,
.btn-7:hover span:after {
  height: 80px;
}
.btn-7:active {
  background: #014f06;
}

.btn-8 {
  color: #5177a7;
}
.btn-8:before, .btn-8:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 0;
  background: #1e395b;
}
.btn-8:after {
  top: auto;
  bottom: 0;
}
.btn-8:hover {
  color: #ccd7e5;
}
.btn-8:hover:before, .btn-8:hover:after {
  height: 40px;
}
.btn-8:active {
  background: #325f98;
}

.btn-9 {
  color: #c93a8e;
}
.btn-9:before, .btn-9:after,
.btn-9 span:before,
.btn-9 span:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 0;
  background: rgba(115, 14, 73, 0.25);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.btn-9:after,
.btn-9 span:before {
  top: auto;
  bottom: 0;
}
.btn-9 span:before,
.btn-9 span:after {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.btn-9:hover {
  color: #efc5de;
}
.btn-9:hover:before, .btn-9:hover:after,
.btn-9:hover span:before,
.btn-9:hover span:after {
  height: 80px;
}
.btn-9:active {
  background: #c0177a;
}

.btn-10 {
  color: #8f5c82;
}
.btn-10:before, .btn-10:after,
.btn-10 span:before,
.btn-10 span:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 80px;
  background: rgba(74, 38, 65, 0.25);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.btn-10:after,
.btn-10 span:before {
  left: auto;
  right: 0;
}
.btn-10 span:before,
.btn-10 span:after {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.btn-10:hover {
  color: #decfda;
}
.btn-10:hover:before, .btn-10:hover:after,
.btn-10:hover span:before,
.btn-10:hover span:after {
  width: 250px;
}
.btn-10:active {
  background: #7b3f6c;
}

@-webkit-keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}
@-webkit-keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
.btn-11 {
  position: relative;
  color: #9a7cba;
}
.btn-11:before, .btn-11:after {
  position: absolute;
  top: 50%;
  content: '';
  width: 20px;
  height: 20px;
  background: #8865ae;
  border-radius: 50%;
}
.btn-11:before {
  left: -20px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /*     animation: criss-cross-left 0.8s reverse; */
}
.btn-11:after {
  right: -20px;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  /*     animation: criss-cross-right 0.8s reverse; */
}
.btn-11:hover:before, .btn-11:hover:after {
  /*       @include size($btn-width); */
}
.btn-11:hover:before {
  -webkit-animation: criss-cross-left 0.8s both;
          animation: criss-cross-left 0.8s both;
}
.btn-11:hover:after {
  -webkit-animation: criss-cross-right 0.8s both;
          animation: criss-cross-right 0.8s both;
}

Tiếp đến là đoạn code hiển thị button:
<div class="zzsc-container">
 <div class="centerer">
   <div class="wrap">
  <a class="btn-0" href="#">Swipe</a>
  <a class="btn-1" href="#">Diagonal Swipe</a>
  <a class="btn-1-2" href="#">Double Swipe</a>
  <a class="btn-2" href="#">Diagonal Close</a>
  <a class="btn-3" href="#"><span>Zoning In</span></a>
  <a class="btn-4" href="#"><span>4 Corners</span></a>
  <a class="btn-5" href="#">Slice</a>
   </div>
   <div class="wrap">
  <a class="btn-6" href="#">Position Aware<span></span></a>
  <a class="btn-7" href="#"><span>Alternate</span></a>
  <a class="btn-8" href="#">Smoosh</a>
  <a class="btn-9" href="#"><span>Vertical Overlap</span></a>
  <a class="btn-10" href="#"><span>Horizontal Overlap</span></a>
  <a class="btn-11" href="#">Collision</a>
   </div>
 </div>
</div>
BÀI VIẾT CÙNG CHUYÊN MỤC
Nâng cấp Blogger Layout, Default Widget và Skin lên phiên bản mới

Vừa qua Google có tung ra gói theme blogger mới khá đẹp mắt với chức năng tùy chỉnh cao hơn. Tuy nhiên với hầ ...

Code Nút Social share cho blogspot Blogger

Button chia sẻ bài viết lên các trang mạng xã hội là 1 thành phần không thể thiếu với mỗi template blogger. V ...

Thay đổi Avatar thành viên nào đó của comment Blogger

Khi bạn sử dụng hệ thống bình luận mà blogger cung cấp, nếu như hồ sơ người dùng chưa có avatar thì blogger s ...

CSS3 Hiệu ứng ẩn hiện cho blogspot

DemoChèn code dưới vào chỗ cần đặt:<div class="container"> <div class="accordion"> <dl> ...

CSS3 Trang 404 hiệu ứng đẹp

DemoĐầu tiên các bạn chèn CSS cho trang 404:body { display: -webkit-box; display: -webkit-flex; display: - ...

Hiệu ứng Hover cho img Chất cho blogspot

DemoĐầu tiên bạn kiểm tra blog bạn có link css này chưa, chưa có thì chèn thêm vào link css dưới: <link hr ...

Thay đổi tiêu đề trang tìm kiếm label Blogspot

Sử dụng nền tảng blogger thì chắc chắn phải biết đến label (nhãn). Nhãn giúp ta phân loại, quản lý bài viết v ...

Menu ẩn hiện dạng Material Design cho blogspot

Menu là thành phần không thể thiếu đối với mỗi website, 1 thanh menu chưa đủ với bạn ? bạn cần 1 thanh menu ẩ ...

Code Hiệu Ứng Hộp Search Tìm Kiếm Đẹp Cho Blogspot

DemoĐầu tiền Chèn đoạn code hiển thị khung search dưới đây: <label class="input-container closed"> ...

Chúc mừng, bạn là người đầu tiên!

CÓ THỂ BẠN ĐANG TÌM
  • Template Blogspot Games APK Download 2018
    Template Blogspot Games APK Download 2018
    14/05/2018 - 0 bình luận
    Demo   Liên hệ#Template Blogspot #Template Blogspot Games  #Template Blogspot APPS
  • Hiệu ứng Hover cho img Chất cho blogspot
    Hiệu ứng Hover cho img Chất cho blogspot
    14/05/2018 - 0 bình luận
    DemoĐầu tiên bạn kiểm tra blog bạn có link css này chưa, chưa có thì chèn thêm vào link css dưới: <link href…
  • CSS Hiệu Ứng Thầy Trò Tây Du Ký Thỉnh Kinh
    CSS Hiệu Ứng Thầy Trò Tây Du Ký Thỉnh Kinh
    08/07/2018 - 0 bình luận
    DemoChèn CSS dưới vào:* { padding: 0; margin: 0; list-style: none; } html,body { height: 100%; } .main { h…
  • Code Nút Social share cho blogspot Blogger
    Code Nút Social share cho blogspot Blogger
    21/05/2018 - 0 bình luận
    Button chia sẻ bài viết lên các trang mạng xã hội là 1 thành phần không thể thiếu với mỗi template blogger. Việ…
  • Code Slider Post Làm Trang Chủ
    Code Slider Post Làm Trang Chủ
    25/05/2018 - 0 bình luận
    DemoĐầu tiên chèn đoạn css dưới:<link href="css/style.css" rel="stylesheet" type="text/css"></link>…
  • Tạo khung chứa code có nút copy to clipboard cho blogspot
    Tạo khung chứa code có nút copy to clipboard cho blogspot
    24/05/2018 - 0 bình luận
    Để làm được điều đó thì bạn cần các công cụ sauFontawesome để cho nút copy thêm sinh độngJQuery: cái này thì hầ…
  • CSS3 Hiệu ứng button đẹp
    CSS3 Hiệu ứng button đẹp
    07/05/2018 - 0 bình luận
    DemoĐầu tiên chèn css dưới vào:.centerer { width: 100%; max-width: 600px; margin: 0 auto;}.wrap { width: 50…
  • Template Blogspot Giống imuzik
    Template Blogspot Giống imuzik
    15/10/2018 - 0 bình luận
    Demo   Liên hệ#Giao diện nghe nhạc, #Template blogspot nhạc, Template nhạc.
  • Nâng cấp Blogger Layout, Default Widget và Skin lên phiên bản mới
    Nâng cấp Blogger Layout, Default Widget và Skin lên phiên bản mới
    25/05/2018 - 0 bình luận
    Vừa qua Google có tung ra gói theme blogger mới khá đẹp mắt với chức năng tùy chỉnh cao hơn. Tuy nhiên với hầu …
  • Thay đổi Avatar thành viên nào đó của comment Blogger
    Thay đổi Avatar thành viên nào đó của comment Blogger
    20/05/2018 - 0 bình luận
    Khi bạn sử dụng hệ thống bình luận mà blogger cung cấp, nếu như hồ sơ người dùng chưa có avatar thì blogger sẽ …
  • Thay đổi tiêu đề trang tìm kiếm label Blogspot
    Thay đổi tiêu đề trang tìm kiếm label Blogspot
    19/05/2018 - 0 bình luận
    Sử dụng nền tảng blogger thì chắc chắn phải biết đến label (nhãn). Nhãn giúp ta phân loại, quản lý bài viết và …
  • Template Blogspot Giống Zing Mp3 2018
    Template Blogspot Giống Zing Mp3 2018
    29/10/2018 - 0 bình luận
    Demo   Liên hệ#Giao diện nghe nhạc, #Template blogspot nhạc, Template nhạc.