ปุ่ม 3D บนเว็บไซต์ !

[ย้ายบทความจาก Gushared.com]
    ถ้าพูดถึงความประทับใจในการเข้าเว็บไซต์ เว็บไซต์แบบไหนล่ะที่คุณเข้าแล้วคุณรู้สึกว่า เห้ย ! แมร่งเจ๋งหว่ะ ถ้าสำหรับผมแล้วเว็บไซต์ที่จะทำให้ผมประทับใจได้จะต้อง ดูสะอาดตา ใช้งานง่ายแบบว่าใครเข้ามาก็ใช้งานเป็นเลย มีความแปลกประหลาดแหวกแนวไปจากเว็บไซต์เดิมๆที่เคยใช้
    ผมได้ลองเข้าไปเว็บไซต์ cssdeck.com ไปเจอตัวอย่างการทำปุ่มแบบ 3D ของคุณ simonpicos เห้ย! แมร่งแนวว่ะ ก็เลยเอามาลองทำดูบ้าง ตามด้านล่างนี้เลยครับ (ลองคลิกปุ่มดูนะครับ >.<)

Support : Chrome, Safari, Firefox และ Opera

Gunghun

HTML Code

<link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
<a>Gunghun</a>

CSS Code

a.button3d {
    cursor:pointer;
    position: relative;
    color: #ffffff;
    text-decoration: none;
    background-color: #f26522;
    font-family: 'Lily Script One', cursive;
    font-weight: 700;
    font-size: 3em;
    display: block;
    padding: 4px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 0px #ea1c1c, 0px 9px 25px #000000;
    -moz-box-shadow: 0px 9px 0px #ea1c1c, 0px 9px 25px #000000;
    box-shadow: 0px 9px 0px #ea1c1c, 0px 9px 25px #000000;
    margin: 65px auto;
    width: 224px;
    text-align: center;
 
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
}

a.button3d:active {
    -webkit-box-shadow: 0px 3px 0px #ea1c1c, 0px 3px 6px #000000;
    -moz-box-shadow: 0px 3px 0px #ea1c1c, 0px 3px 6px #000000;
    box-shadow: 0px 3px 0px #ea1c1c, 0px 3px 6px #000000;
    position: relative;
    top: 6px;
}