用CSS製作凸出按鈕效果
本文包含HTML效果，閱讀原文以體驗最佳效果：原文
按鈕在各種軟體的開發中幾乎都是少不了的部分，好看的按鈕有很多。今天我們來試著使用CSS製作簡單的凸出按鈕。
凸出按鈕，顧名思義就是讓使用者覺得它是凸出於網頁這個平面的，點選的時候會把它戳進去。 很多按鈕都會有這樣的效果，因為這的確是不錯的使用者體驗。我們要做的是以CSS3為基礎的簡單凸出按鈕。
文字凸出按鈕
目標效果
L C G核心知識點text-shadow
在CSS3中有兩個建立投影的屬性，它們分別是text-shadow和box-shadow。其中text-shadow 是為文字建立投影的，而text-shadow是為標籤實際位置佔用建立投影。
瞭解投影的人應該很多，用來區分同色範圍和體現層次效果非常好用。 並且它也是CSS繪圖技術中的一大勢力。通過before、after和box-shadow 三個屬性最多可以讓一個標籤繪製6個形狀。再配合背景繪圖技術可以讓一個標籤的效果十分豐富。
如果對相關的CSS繪圖技術感興趣的可以看看國外大神作的一個DIV完成的效果集:
那麼說一說text-shadow的基本用法吧。
.demo{
text-shadow:5px 5px 3px #444;
}
Demo 水平 豎直 模糊 顏色
在text-shadow屬性中有4個引數，分別是水平位移、豎直位移、模糊範圍以及投影顏色。 可以當做一個簡單的PS中的投影使用。不過投影的目標是文字，文字外的其他部分不會受到任何影響。 瞭解了text-shadow的用法哪我們的凸出按鈕的原理也很清楚了。
text-shadow: 0px 5px 0px #9c936a;
首先使用text-shadow建立一個不模糊、不透明並且在文字下方的“投影”。 投影的顏色使用比文字顏色暗一些的顏色，然後調整豎直距離到合適位置。 這裡適合使用一些粗一些的字型，這裡我使用的是粗體微軟雅黑。
:hover{
color:#fff;
text-shadow: 0px 5px 0px #aca37a;
}
:active{
transform: translateY(5px);
-webkit-transform: translateY(5px);
text-shadow: 0px 0px 0px #aca37a;
}
然後我們為它加入hover的顏色過渡和active的位移過渡以及投影位移過渡。 使用者按下後文字整體下沉，投影上移與文字重疊，以此製作出使用者按下按鈕的效果。 值得我們注意的是這裡如果我們的物件的display屬性值為inline的話是十分影響transform 位移的效果的，為了避免不必要的麻煩最好將它設定成其他值，這裡我將標籤的display設定為了 inline-block。
下面是整體的程式碼實現:
雖然我們不能直接對圖示進行投影，但是我們可以將圖示轉換成字型或者直接使用現成的圖示字型。 它在Web中可以使用和文字完全相同的特性。
塊級凸出按鈕
其實瞭解了文字凸出按鈕的實現方法，塊級凸出按鈕的實現方法是一樣的。 無非就是把文字的投影轉移到了“塊”上面。
目標效果
L C G上面的內容就是將text-shadow換成box-shadow做成的。
疊加實驗
依然是那句話，不把一個屬性玩壞的前端工程師不是一個好紳士。我們來試試一些組合。
text-shadow+box-shadow
L C G上面我們簡單的將text-shadow和box-shadow組合在一起。 不過因為文字的位置問題顯得很違和，我們需要再將文字進行一次位移，內部的文字我們嘗試使用padding 進行位移。
L C G成功，上面我們通過將padding-top和padding-bottom加入動畫 只使用了一個標籤做到了點選雙層按壓的效果，這種彈性效果可應用的場合還是比較多的。
結束語
在深入學習CSS之後，已經習慣於儘量減少HTML標籤的使用，通過各種CSS的強大功能來完成樣式。 不過在開發官方性質網站的時候為了相容性還是得中規中矩的少用CSS3裡的內容
。 現在為了網站SEO優化也是放棄了使用一些動態生成DOM的框架進行開發，
老老實實的把DOM配合PHP寫出來。