超漂亮的CSS3按鈕製做教程分享

要求

    • 必備知識

      基本瞭解CSS語法,初步瞭解CSS3語法知識。css

    • 開發環境

      Adobe Dreamweaver CS6/Chrome瀏覽器html

    • 演示地址

      演示地址css3

利用CSS3屬性製做按鈕,咱們只須要用到Gradient屬性,不用使用任何圖片素材和JavaScript代碼,僅僅經過CSS就能製做出好看的漸變按鈕。按鈕的大小能夠經過CSS屬性就能輕鬆的修改,並且它可使用html的不少標籤來製做,好比div,button,span,a,input[‘submit’]等等。下列案例就是經過CSS3製做的按鈕:web

2014-07-16_173723

 

利用CSS3製做按鈕的優勢

  1. 不須要圖片和JavaScript;
  2. 拓展性強 : 能夠經過修改CSS來改變外觀;
  3. 按鈕具備三態: normal, hover和active狀態;
  4. 可使用多種html標籤來製做Buttons;
  5. 可使用CSS3屬性增長其餘效果,不支持CSS3的瀏覽器將正常顯示。

 

瀏覽器下效果

下圖爲支持CSS3和不支持CSS3瀏覽器下不一樣的渲染效果。瀏覽器

2014-07-16_211857

 

按鈕三種狀態效果

  1. 正常狀態(Normal State):使用了漸變,圓角,陰影效果,添加 ::before僞元素;
  2. 懸浮狀態(Hover State):漸變色變深(本例中沒添加Hover狀態);
  3. 點擊狀態(Active State):返轉漸變色,外陰影減弱,內陰影加深,添加 ::before僞元素。

2014-07-16_221726

 

製做過程

1,在body中添加html標籤學習

<a href="#" class="a_demo">  Click me! </a>

 

2,給<a>標籤添加Normal和Active 狀態,  這裏須要給元素添加相對定位屬性, 由於咱們後面須要對::before僞元素進行定位。網站

.a_demo {
    background-color:#3bb3e0;
    width:150px;
    display:inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:center;
    text-decoration:none;
    color:#fff;
    position:relative;
    margin-top:40px;
    padding-bottom:10px;
    padding-top:10px;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(44,160,202)),
    color-stop(1, rgb(62,184,229))
    );
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    
    
    
}

.a_demo:active {
    top:0px;
    background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(62,184,229)),
    color-stop(1, rgb(44,160,202))
    );
    -webkit-box-shadow: inset 0px 4px 1px #0b698b, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 4px 1px #0b698b,0px 2px 0px 1px #156785, 0px 5px 3px #999;
    -o-box-shadow:inset 0px 4px 1px #0b698b, 0px 2px 0px 1px #156785, 0px 5px 3px #999;
    box-shadow: inset 0px 4px 1px #0b698b, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

 

3,添加::before僞元素。url

.a_demo::before {
    background-color:#fff;
    background-image:url(Pic/heart.gif);
    background-repeat:no-repeat;
    background-position:center center;
    content:"";
    width:150px;
    height:40px;
    position:absolute;
    top:-30px;
    left:0px;
    margin-top:-11px;
    z-index:-1;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.a_demo:active::before {
    top: -30px;    
    -webkit-box-shadow: 0px 3px 0px #ccc;
    -moz-box-shadow: 0px 3px 0px #ccc;
    -o-box-shadow: 0px 3px 0px #ccc;
    box-shadow: 0px 3px 0px #ccc;
}

 

最終效果以下圖:spa

2014-07-16_222800

 

下面給你們推薦幾個CSS3按鈕源碼網站:3d

css-colored-buttons

2014-07-16_230904

 

Slick CSS3 Buttons

2014-07-16_231138

 

 

CSS3 Gradient Buttons

2014-07-16_231348

 

3D Web Buttons

2014-07-16_231715

 

pretty-css3-buttons

2014-07-16_233128

 

如以上文章或連接對你有幫助的話,別忘了在文章結尾處輕輕點擊一下 「還不錯」按鈕或到頁面右下角點擊 「贊一個」 按鈕哦。你也能夠點擊頁面右邊「分享」懸浮按鈕哦,讓更多的人閱讀這篇文章。

做者: Li-Cheng
因爲本人水平有限,文章在表述和代碼方面若有不妥之處,歡迎批評指正。留下你的腳印,歡迎評論哦。你也能夠關注我,一塊兒學習哦!
相關文章
相關標籤/搜索