用滑動門技術設計按鈕的圖文教程_經驗交流

來源:互聯網
上載者:User
本文為翻譯文章,全文地址:http://diger.cn/article.asp?id=351
原文地址:http://www.filamentgroup.com/lab/buttonElement/

Particle Tree 最近發布了一篇文章描述了一種他們拿出的設計按鈕元素的技術,對於那些不熟練的人來說,表格按鍵是出了名的難以定製。典型的解決方案是使用瀏覽器提供的預設按鈕,或者是使用一個圖形輸入。當圖形輸入完成了需求結果時,它請求建立一個新的圖形為每一個按鈕用它的文本“Baked-in”(沒有提及以hovers交換它)。

儘管Particle Tree的技術提供了一種可靠的方案,它不能滿足我們的需求。我們需要一種使用了滑動門技術的按鈕,一種真正的HTML文本,不需要請求JavaScript轉滾或者提交表格。滿足這些條件就意味著input和anchor元素被排除了。很顯然,按鈕元素正是我們唯一的選擇。下面的技術示範了一種使用滑動門技術的跨瀏覽器的按鈕的技術。


查看Demo

標籤:

代碼如下:

<button value="submit" class="submitBtn"><span>Submit</span></button>

CSS:

程式碼 代碼如下:

button {     border:0;     cursor:pointer;     font-weight:bold;     padding:0 20px 0 0;     text-align:center;   }  button span {     position:relative;     display:block;     white-space:nowrap;     padding:0 0 0 20px;   }  /*blue buttons*/  button.submitBtn {     background:url(images/btn_blue_right.gif) right no-repeat;     font-size:1.3em;   }  button.submitBtn span {     height:50px;     line-height:50px;    background:url(images/btn_blue_left.gif) left no-repeat;    color:#fff;   }  button.submitBtn:hover {      background:url(images/btn_blue_right_hover.gif) right no-repeat;   }  button.submitBtn:hover span {      background:url(images/btn_blue_left_hover.gif) left no-repeat;   }


CSS For IE6和IE7(有時候需要)
代碼如下:

button {     width:auto;     overflow:visible;   }  button span {     margin-top:1px;   }

就像你能看到的那樣,每個狀態使用了2個圖片(總共4個圖片)。進一步簡化,可以將這些狀態轉化為兩個。但這種想法的最初測試出現了不一致的結果。











瀏覽器支援:
IE6,IE7,Firefox(mac/pc),Safari,Opera,Camino等等。

警告:為了使hover在IE6中有效,你將需要編寫一個類觸發器。儘管不像圖片交換一樣糟糕。

以上就是用滑動門技術設計按鈕的圖文教程_經驗交流的內容,更多相關內容請關注topic.alibabacloud.com(www.php.cn)!

  • 相關文章

    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.