css如何製作出漂亮酷炫的按鈕?
CSS3的transitions和animations屬性都可以用來實現風格漸變的效果。本文即收集了一些非常不錯的利用它們來製作Web按鈕的教程,希望你會喜歡。
1。 Type study: An all CSS button
地址:
http://blog。typekit。com/2011/02/10/type-study-an-all-css-button
透過本文介紹的使用box-shadow、text-shadow、border-radius以及CSS gradients(漸變)方法,我們可以設計出一個非常漂亮的介面元件而無需使用圖片。
2。 Radioactive Buttons
地址:
http://www。zurb。com/playground/radioactive-buttons
使用CSS animation設計漂亮優雅的按鈕,帶來跳動的體驗哦。
3。 Animated Buttons with CSS3
地址:
http://tympanus。net/codrops/2011/11/07/animated-buttons-with-css3
這個教程指導瞭如何在按鈕上設計一些動態連結元素,包括多種風格與懸停效果,非常有創意。
4。CSS3 Animated Bubble Buttons
地址:
http://tutorialzine。com/2010/10/css3-animated-bubble-buttons
在本文你將學會如何藉助CSS3中的多背景功能來設計一系列相似按鈕。
5。 Cross Browser Pure CSS3 Button Demo(跨瀏覽器的純CSS3按鈕實現)
地址:
http://www。midwinter-
dg。com/permalink-cross-browser-pure-css3-button-demo-2011-07-21。html
已經在Mca下的Safari 5、Firefox 5、Chrome 12和Opera 11。5中測試過,IE的話就不勉其難了,或者你可以試試。
6。 CSS Only Button
地址:
http://www。binarymoon。co。uk/2010/06/css-button-redux
此教程只利用CSS和HTML來設計完善的動畫按鈕,不使用任何JS及圖片。