css如何讓button按鈕變色的實例分析

首先我們來看最後的效果圖把：

這個就是我們最好的目標。如果敢興趣的話好吧，那你就繼續看下去。

首先這個按鈕有用到css3.0的新樣式屬性。如果你的瀏覽器沒有看到邊角圓弧的樣式，那就表示你的瀏覽器版本不支援css3.0的新樣式。解決辦法，升級瀏覽器到最新的。就我所知XP、Windows Server2003最高支援的是IE8（可以看到效果了），如果你不想升級IE，那們你可要下載不是IE為核心的瀏覽器，像是火狐、Google、Opera等等。

好了前面這麼多廢話，我們該看一下如何做出我們漂亮的按鈕。

其實我們這裡用到了css的偽元素，hover。

首先我們必須在頁面上，放一個input類型的button按鈕。對這個button按鈕進行css的樣式的加入。

具體的css程式碼如下：

.mybtn {
    width:86px;
    text-align:center;
    line-height:100%;
    padding-top:0.5em;
    padding-right:2em;
    padding-bottom:0.55em;
    padding-left:2em;
    font-family:Arial,sans-serif;
    font-size:14px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    text-decoration:none;
    margin-top:0px;
    margin-right:2px;
    margin-bottom:0px;
    margin-left:2px;
    vertical-align:text-bottom;
    display:inline-block;
    cursor:pointer;
    zoom:1;
    outline-width:medium;
    outline-color:invert;
    font-size-adjust:none;
    font-stretch:normal;
    border-top-left-radius:0.5em;
    border-top-right-radius:0.5em;
    border-bottom-left-radius:0.5em;
    border-bottom-right-radius:0.5em;
    box-shadow:0px 1px 2px rgba(0,0,0,0.2);
    text-shadow:0px 1px 1px rgba(0,0,0,0.3);
    color:#fefee9;
    border-top-color:#da7c0c;
    border-right-color:#da7c0c;
    border-bottom-color:#da7c0c;
    border-left-color:#da7c0c;
    border-top-width:1px;
    border-right-width:1px;
    border-bottom-width:1px;
    border-left-width:1px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:solid;
    border-left-style:solid;
    background-image:none;
    background-attachment:scroll;
    background-repeat:repeat;
    background-position-x:0%;
    background-position-y:0%;
    background-size:auto;
    background-origin:padding-box;
    background-clip:padding-box;
    background-color:#f78d1d;
}

具體的css樣式解釋還是百度一下吧，這樣可以提高你的css水平。如果你不懂css技能，但想用到這樣的效果，那需要修改的就是按鈕的width，設定成自己按鈕合適的寬度。還有一個就是背景顏色的替換了。

寫好css樣式，寫好input的button按鈕之後，我們應該把他們關聯起來，只需要在input的button中加入class。

<input type="button" class="mybtn" value="我是按钮" />

現在我們還差最後一部了，就是利用css的偽元素hover，

在寫一句mybtn的hover樣式。程式碼如下：

.mybtn:hover {
    background: #f47c20;
}

因為我們滑鼠移上去只需要修改背景的顏色，那麼我們只需要在hover樣式中修改一個屬性。

以上是css如何讓button按鈕變色的實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！