css如何讓button按鈕變色的執行個體分析

來源:互聯網
上載者:User
首先我們來看一下最後的把:

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

首先這個按鈕有用到css3.0的新樣式屬性。如果你的瀏覽器沒有看到邊角圓弧的樣式,那就說明你的瀏覽器版本不支援css3.0的新樣式。解決辦法,升級瀏覽器到最新的。據我所知XP、Windows Server2003最高支援的是IE8(可以看到效果了),如果你不想升級IE,那們你可要下載不是IE為核心的瀏覽器,比如Firefox、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樣式中修改一個屬性。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.