Một kiểu button css3 cảm giác thực

Kiểu nút bấm khá đẹp mắt, tạo cảm giác chân thực như khi ta nhấn lên phím thực. Tạo nút bấm này không khó, đơn giản bạn tỉ mỉ chọn màu sắc và chút bòng đổ là được.

Dây là demo được sưu tầm trên mạng, chưa rõ nguồn.

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>

CSS

@charset "UTF-8";

* { margin: 0; padding: 0; border: 0; }
body { padding: 20px 10px; background: url(http://i.imgur.com/Pd2Xs.jpg); }

/* -------------------------------
    common
 ------------------------------- */
ul.switchBox {
    width: 98%;
    margin-left: 2%;
    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);
}

DEMO

---