Button 3D css3 hiệu ứng hover cực cool cho blogspot

Bạn đang tìm kiếm một số nút CSS3 3D đẹp và mát mẻ để sử dụng trong các dự án website/blogspot trong thế giới thực?

Trong khi có bạn thích thiết kế blog bằng phẳng , nhưng cũng có bạn lại thích thiết kế blog theo phong thái có gì đấy hơi gồ ghề ná ná như cái được gọi là 3D với việc sử dụng một số nút 3D CSS3 hover kết hợp với thiết kế phẳng làm cho blog có phần sinh động và mát mẻ hơn.

Ý tưởng là để nhấn mạnh lời kêu gọi hành động đối với một hiệu ứng 3D trên các nút này.

Dưới đây là một số nút tuyệt vời, mà tôi nghĩ là mát mẻ và thiết thực và có thể được sử dụng trong các dự án web của bạn.

Xem thử tý nhé

DEMO

Để có các nút này công việc mà bạn cần làm rất đơn giản chỉ cần đưa toàn bộ code bên dưới vào bài viết bên soạn thảo HTML,hay là bỏ phần css vào trong mẫu rồi dán đoạn HTML vào chỗ nào bạn muốn cũng trong mẫu luôn.

Code

CSS

ul.switchBox {
    width: 98%;
    list-style: none;
    zoom: 1;
}
ul.switchBox:after {
  content: "";
  display: block;
  clear: both;
}

ul.switchBox li,
ul.switchBox li a {
    display: block;
    font: 100%/1 "lucida grande", Sans-Serif;
    text-align: center;
    /* border-radius */
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    /* transition */
    transition: all 0.3s ease 0;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
}

ul.switchBox li {
    float: left;
    width: 18%;
    margin-right: 2%;
}

/* -------------------------------
    switch
 ------------------------------- */
ul.switchBox li a {
    padding: 20px 0;
    color: white;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
    /* box-shadow */
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
    -o-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
    -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
}
ul.switchBox li.switch1 a {
    border: 1px #aaa solid;
    color: #555;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
    /* gradient */
    background: linear-gradient(top, #eee 0%, #ccc 100%);
    background: -o-linear-gradient(top, #eee 0%, #ccc 100%);
    background: -moz-linear-gradient(top, #eee 0%, #ccc 100%);
    background: -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
    background: -ms-linear-gradient(top, #eee 0%, #ccc 100%);
    /* box-shadow */
    box-shadow: 0 1px 0 rgba(255,255,255,1) inset;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,1) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,1) inset;
    -o-box-shadow: 0 1px 0 rgba(255,255,255,1) inset;
    -ms-box-shadow: 0 1px 0 rgba(255,255,255,1) inset;
}

ul.switchBox li:hover a {
    /* box-shadow */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 2px 5px rgba(0,0,0,0.1) inset;
    -ms-box-shadow: 0 2px 5px rgba(0,0,0,0.1) inset;
}
ul.switchBox li.switch1:hover a {
    border: 1px #999 solid;
    /* gradient */
    background: linear-gradient(top, #dfdfdf 0%, #ddd 100%);
    background: -o-linear-gradient(top, #dfdfdf 0%, #ddd 100%);
    background: -moz-linear-gradient(top, #dfdfdf 0%, #ddd 100%);
    background: -webkit-linear-gradient(top, #dfdfdf 0%, #ddd 100%);
    background: -ms-linear-gradient(top, #dfdfdf 0%, #ddd 100%);
}

ul.switchBox li.switch2 a {
    border: 1px #159 solid;
    /* gradient */
    background: linear-gradient(top, #73afd8 0%, #397bb8 100%);
    background: -o-linear-gradient(top, #73afd8 0%, #397bb8 100%);
    background: -moz-linear-gradient(top, #73afd8 0%, #397bb8 100%);
    background: -webkit-linear-gradient(top, #73afd8 0%, #397bb8 100%);
    background: -ms-linear-gradient(top, #73afd8 0%, #397bb8 100%);
}
ul.switchBox li.switch2:hover a {
    /* gradient */
    background: linear-gradient(top, #5195c9 0%, #4487c0 100%);
    background: -o-linear-gradient(top, #5195c9 0%, #4487c0 100%);
    background: -moz-linear-gradient(top, #5195c9 0%, #4487c0 100%);
    background: -webkit-linear-gradient(top, #5195c9 0%, #4487c0 100%);
    background: -ms-linear-gradient(top, #5195c9 0%, #4487c0 100%);
}

ul.switchBox li.switch3 a {
    border: 1px #583 solid;
    /* gradient */
    background: linear-gradient(top, #9dc983 0%, #65a049 100%);
    background: -o-linear-gradient(top, #9dc983 0%, #65a049 100%);
    background: -moz-linear-gradient(top, #9dc983 0%, #65a049 100%);
    background: -webkit-linear-gradient(top, #9dc983 0%, #65a049 100%);
    background: -ms-linear-gradient(top, #9dc983 0%, #65a049 100%);
}
ul.switchBox li.switch3:hover a {
    /* gradient */
    background: linear-gradient(top, #80b663 0%, #71aa55 100%);
    background: -o-linear-gradient(top, #80b663 0%, #71aa55 100%);
    background: -moz-linear-gradient(top, #80b663 0%, #71aa55 100%);
    background: -webkit-linear-gradient(top, #80b663 0%, #71aa55 100%);
    background: -ms-linear-gradient(top, #80b663 0%, #71aa55 100%);
}

ul.switchBox li.switch4 a {
    border: 1px #a81 solid;
    /* gradient */
    background: linear-gradient(top, #e5ca3e 0%, #cfa314 100%);
    background: -o-linear-gradient(top, #e5ca3e 0%, #cfa314 100%);
    background: -moz-linear-gradient(top, #e5ca3e 0%, #cfa314 100%);
    background: -webkit-linear-gradient(top, #e5ca3e 0%, #cfa314 100%);
    background: -ms-linear-gradient(top, #e5ca3e 0%, #cfa314 100%);
}
ul.switchBox li.switch4:hover a {
    /* gradient */
    background: linear-gradient(top, #dbb820 0%, #d4ac19 100%);
    background: -o-linear-gradient(top, #dbb820 0%, #d4ac19 100%);
    background: -moz-linear-gradient(top, #dbb820 0%, #d4ac19 100%);
    background: -webkit-linear-gradient(top, #dbb820 0%, #d4ac19 100%);
    background: -ms-linear-gradient(top, #dbb820 0%, #d4ac19 100%);
}

ul.switchBox li.switch5 a {
    border: 1px #933 solid;
    /* gradient */
    background: linear-gradient(top, #d87373 0%, #b83939 100%);
    background: -o-linear-gradient(top, #d87373 0%, #b83939 100%);
    background: -moz-linear-gradient(top, #d87373 0%, #b83939 100%);
    background: -webkit-linear-gradient(top, #d87373 0%, #b83939 100%);
    background: -ms-linear-gradient(top, #d87373 0%, #b83939 100%);
}
ul.switchBox li.switch5:hover a {
    /* gradient */
    background: linear-gradient(top, #c95151 0%, #c04444 100%);
    background: -o-linear-gradient(top, #c95151 0%, #c04444 100%);
    background: -moz-linear-gradient(top, #c95151 0%, #c04444 100%);
    background: -webkit-linear-gradient(top, #c95151 0%, #c04444 100%);
    background: -ms-linear-gradient(top, #c95151 0%, #c04444 100%);
}

/* -------------------------------
    switch1
 ------------------------------- */
#switchBox1 li {
    margin-top: -5px;
    padding-bottom: 5px;
    /* box-shadow */
    box-shadow: 0 5px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 5px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 5px 3px rgba(0,0,0,0.2);
    -o-box-shadow: 0 5px 3px rgba(0,0,0,0.2);
    -ms-box-shadow: 0 5px 3px rgba(0,0,0,0.2);
}
#switchBox1 li.switch1 {
    background: rgba(0,0,0,0.5);
}
#switchBox1 li.switch2 {
    background: rgba(17,85,153,1);
}
#switchBox1 li.switch3 {
    background: rgba(68,119,34,1);
}
#switchBox1 li.switch4 {
    background: rgba(153,119,17,1);
}
#switchBox1 li.switch5 {
    background: rgba(136,51,51,1);
}
#switchBox1 li:last-child {
    margin-right: 0%;
}
#switchBox1 li:hover {
    margin-top: -2px;
    padding-bottom: 2px;
    /* box-shadow */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    -o-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

HTML

<ul id="switchBox1" class="switchBox">
<li class="switch1"><a href="#">Switch1</a></li>
<li class="switch2"><a href="#">Switch2</a></li>
<li class="switch3"><a href="#">Switch3</a></li>
<li class="switch4"><a href="#">Switch4</a></li>
<li class="switch5"><a href="#">Switch5</a></li>
</ul>