9款精美別致的CSS3菜單和按鈕

今天我們要來分享9款精美別致的CSS3菜單和按鈕，菜單有動畫菜單、下拉菜單、環形菜單，按鈕也非常漂亮，一起來看看。

1、超具立體感的CSS3 3D菜單 菜單項帶小圖標

記得之前向大家分享過不少CSS3 3D菜單，比如CSS3 3D動畫菜單 3D立方體菜單項和HTML5/CSS3自定義下拉框 3D卡片折疊動畫，效果都很漂亮。今天我們要再分享一款更酷的CSS3 3D立體菜單，這款菜單側躺在頁面上，每個菜單項都有不錯的小圖標。

在線演示 / 源碼下載

2、純CSS3立體動畫菜單 菜單項按下有內陰影

這次小編來分享一款利用純CSS3實現的立體動畫菜單，該菜單的實現非常簡單，並沒有太多的特效渲染，但是看起來卻非常幹淨漂亮，尤其配合灰黑色的背景，讓菜單顯得有點立體的感覺。另外，當我們點擊菜單項時，菜單項將會出現內陰影的視覺效果。

在線演示 / 源碼下載

3、HTML5/CSS3超酷環形動畫菜單

今天我們要分享一款非常有創意的HTML5/CSS3動畫菜單，菜單是環形的，當鼠標點擊中心按鈕時，子菜單即會環繞展開，並伴隨很酷的菜單展開動畫。記得之前還分享過一款HTML5/CSS3實現iOS Path菜單，也是環形的菜單，動畫效果也比較酷。

在線演示 / 源碼下載

4、一組超酷的CSS3 3D按鈕 可定義尺寸和顏色

今天我們要來分享一款超酷的CSS3 3D按鈕，這款3D按鈕的設計也十分簡單，支持3種不同的色彩和3種不同的尺寸大小。CSS3 3D按鈕效果之前我們也分享過不少了，比如這款純CSS3實現3D Twitter按鈕 按鈕可翻轉。

在線演示 / 源碼下載

5、HTML5/CSS3動畫下拉菜單 子菜單很酷

今天我們要來分享一款效果很不錯的CSS3下拉菜單，和其他的CSS3下拉菜單功能類似，也是鼠標滑過主菜單是下拉展開子菜單，同時子菜單展開的時候有不錯的動畫效果，這款動畫應該叫做矩形展開動畫吧。

在線演示 / 源碼下載

6、CSS3黑色主題菜單 菜單項淡入淡出動畫

今天我們要來分享一款簡單實用的CSS3菜單，菜單是黑色主題，因此顯得非常端莊霸氣。由於菜單應用了CSS3特性，菜單的邊緣將出現陰影的效果，給人立體的視覺效果。另外還有一個特點就是，鼠標滑過菜單項時將出現淡入淡出的動畫特效，是一款很不錯的CSS3黑色主題菜單。

在線演示 / 源碼下載

7、CSS3小球浮動按鈕 小球滾動很逼真

今天要分享一款很有特色的CSS3動畫按鈕，它和普通的按鈕不同，外觀也不像普通的按鈕，這款按鈕由7個點組成，每點擊其中一個小點按鈕，小球即會滾動到相應的位置，小球有投影，滾動效果也非常逼真。更多按鈕特效，可以移步至CSS3按鈕目錄。

在線演示 / 源碼下載

8、CSS3/SVG質感背景小圖標 鏤空效果圖標按鈕

之前我們分享過很多利用CSS3制作的圖標小按鈕，比如一些分享按鈕，如純CSS3社會化分享按鈕，還有一些帶小圖標的CSS3菜單，如HTML5/CSS3滑塊動畫菜單 圖標動畫很酷。今天我們來分享一款用CSS3和SVG實現的質感背景小圖標，鼠標滑過圖標時出現鏤空的效果，並且有質感背景的描邊，效果非常不錯。

在線演示 / 源碼下載

9、CSS3 3D發光切換按鈕 模擬效果很逼真

剛剛我們發布過一款CSS3開關切換滑動按鈕，應該說出了有點3D立體的效果外，其他都很普通。現在我們要來分享一款更酷的CSS3開關切換按鈕，它不僅具有3D的效果，而且可以發光，當開關處於打開狀態時，旁邊的小燈就會亮起來，然後燈光投射到開關上，效果挺逼真的。

在線演示 / 源碼下載
以上就是9款精美別致的CSS3菜單和按鈕，歡迎收藏分享。




相關資源：CSS3實現精美橫向滾動菜單按鈕