DIV CSS 佈局教程網

CSS3按鈕選擇器，通過CSS3新特性把普通的html鏈接設計成視覺上平滑的按鈕，包括梯度背景、圓角、下拉陰影，以及轉換等效果。支持CSS 3動畫，可以把按鈕逐漸地從默認狀態變為懸停狀態，你可以在不使用如上圖那樣的圖片的情況下得到一個漂亮的按鈕。

1. button {
2. -moz-border-radius: 25px;
3. -moz-box-shadow: #6E7849 0px 0px 10px;
4. -moz-transition: all 0.5s ease;
5. -ms-transition: all 0.5s ease;
6. -o-transition: all 0.5s ease;
7. -webkit-border-radius: 25px;
8. -webkit-box-shadow: #6E7849 0 0 10px;
9. -webkit-transition: all 0.5s ease;
10. background-color: #6E7849;
11. background-image: -moz-linear-gradient(90deg, #B9C788, #6E7849);
12. background-image: -ms-linear-gradient(90deg, #B9C788, #6E7849);
13. background-image: -o-linear-gradient(90deg, #B9C788, #6E7849);
14. background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849);
15. background-image: linear-gradient(90deg, #B9C788, #6E7849);
16. border-radius: 25px;
17. border: 2px solid #4a5032;
18. box-shadow: #6E7849 0px 0px 10px;
19. color: #ffffff;
20. display: inline-block;
21. font-size: 4em;
22. margin: auto;
23. padding: 15px;
24. text-decoration: none;
25. text-shadow: #000000 5px 5px 15px;
26. transition: all 0.5s ease;
27. }
28. .button:hover {
29. padding: 15px;
30. }