【CSS3 探索發現】系列二：打造一組閃亮的半透明按鈕效果

　　這是《CSS3 探索發現》系列文章的第二篇，分享一組閃亮的半透明 CSS3 按鈕效果。CSS3 為網頁設計引入了眾多強大的新功能，讓設計和開發人員能夠輕松的創作出精美的界面效果。推薦閱讀：《CSS3 探索發現系列一：一組夢幻般的 CSS3 動畫按鈕效果》

 

 

　　這些閃亮的按鈕使用了兩個 DIV 實現，一個是按鈕主要部分，一個是用來顯示光澤。下面是在線演示，很漂亮吧？把鼠標放在按鈕上試試，有驚喜哦！（溫馨提示：在 Chrome，Firefox 和 Safari 瀏覽器中效果最佳，如果無法顯示請刷新頁面或者訪問鏈接：在線演示）

　　HTML 部分非常簡單，代碼如下：

<div class="button gray"><div class="shine"></div>Button</div>
<div class="button blue"><div class="shine"></div>Button</div>
<div class="button green"><div class="shine"></div>Button</div>
<div class="button red"><div class="shine"></div>Button</div>
<div class="button purple"><div class="shine"></div>Button</div>
<div class="button orange"><div class="shine"></div>Button</div>

　　這些精美的效果用到了 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;
}

　　完整的 CSS 代碼如下：

.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;
    text-shadow: rgba(0,0,0,0.9) 0px 1px 2px;
    
    background: #434343;
    border: 1px solid #242424;
   
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
         -o-border-radius: 4px;
            border-radius: 4px;
    -webkit-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;
     -khtml-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;
       -moz-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;
         -o-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;
            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;
    -webkit-transition: all 0.1s linear;
     -khtml-transition: all 0.1s linear;
       -moz-transition: all 0.1s linear;
         -o-transition: all 0.1s linear;
            transition: all 0.1s linear;
}
.button:hover {
    -webkit-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;
     -khtml-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;
       -moz-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;
         -o-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;
            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;
}
.button:active {
    -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, 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;
     -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, 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;
       -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, 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;
         -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, 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;
            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, 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;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    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;
    -webkit-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
     -khtml-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
       -moz-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
         -o-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
            box-shadow: rgba(255,255,255,0.2) 0px 1px 5px;
    -webkit-transition: all 0.3s ease-in-out;
     -khtml-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}

　　

完整源碼下載    在線效果演示

 

您可能感興趣的相關文章

• Web 開發人員和設計師必讀文章推薦
• 20個非常絢麗的 CSS3 特性應用演示
• 35個讓人驚訝的 CSS3 動畫效果演示
• 推薦12個漂亮的 CSS3 按鈕實現方案
• 24款非常實用的 CSS3 工具終極收藏

 

本文鏈接：CSS3 探索發現系列：一組閃亮的半透明按鈕效果

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