使用 CSS3 打造一組質感細膩絲滑的按鈕

標籤：style   blog   http   color   java   使用   os   strong   

　　CSS3 引入了眾多供功能強大的新特性，讓設計和開發人員能夠輕鬆的創作出各種精美的介面效果。下面這些發出閃亮光澤的按鈕，很漂亮吧？把滑鼠移至上方在按鈕上，還有動感的光澤移動效果。

　　溫馨提示：為保證最佳的效果，請在 IE10+、Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽。

 

 

源碼下載     線上示範

 

　　這些精美的效果用到了 CSS3 RGBA、box-shadow（陰影）、border-radius（邊框圓角）和 linear-gradient（線性漸層），為了便於閱讀，精簡後的公用部分的代碼如下：

.button {    min-height: 1.5em;    display: inline-block;    padding: 12px 36px;    margin: 40px 5px 5px 0px;    cursor: pointer;    opacity: 0.9;         color: #FFF;    font-size: 1em;    letter-spacing: 1px;    /* X軸位移1像素、Y軸位移2像素、不透明度為0.9的黑色文本陰影 */    text-shadow: rgba(0,0,0,0.9) 0px 1px 2px;         background: #434343;    border: 1px solid #242424;        border-radius: 4px;    /*    使用多層陰影實現按鈕立體效果    第一層：Y軸位移1像素、不透明度為0.25的白色外陰影製作效果    第二層：Y軸位移1像素、不透明度為0.25的白色內陰影製作效果    第三層：位移位0、不透明度為0.25的黑色外陰影製作效果    第四層：Y軸位移20像素、不透明度為0.03的白色內陰影製作效果    第五層：X軸位移-20像素、Y軸位移20像素、不透明度為0.15的黑色內陰影製作效果    第六層：X軸位移20像素、Y軸位移20像素、不透明度為0.05的白色內陰影製作效果    */    box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;    /* 讓變化的屬性在100毫秒內勻速過渡 */    transition: all 0.1s linear;}.button:hover {    /*    滑鼠移至上方時的按鈕多層陰影製作效果，和按鈕預設時相比只是第一層有變化：    第一層：X軸位移2像素、Y軸位移5像素、不透明度為0.5的黑色外陰影製作效果    */    box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;}.shine {    display: block;    position: relative;    /* IE下面使用濾鏡實現漸層效果 */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#00ffffff‘, endColorstr=‘#00ffffff‘,GradientType=1 );    /* 使用水平的線性漸層實現按鈕頂部的關澤效果 */    background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);    padding: 0px 12px;    top: -12px;    left: -24px;    height: 1px;    box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;    /* 讓變化的屬性在300毫秒內以ease-in-out（先加速後減速）方式過渡 */    transition: all 0.3s ease-in-out;}

　　

源碼下載    線上示範

 

您可能感興趣的相關文章

• Web 開發中很實用的10個效果【附源碼下載】
• 精心挑選的優秀jQuery Ajax分頁外掛程式和教程
• 12個讓人驚歎的的創意的 404 錯誤頁面設計
• 讓網站動起來！12款優秀的 jQuery 動畫外掛程式
• 8個非常驚豔的 HTML5 和 JavaScript 特效

 

本文連結：使用 CSS3 打造一組質感細膩絲滑的按鈕效果

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

本文來自【夢想天空（http://www.cnblogs.com/lhb25/）】