首頁 >web前端 >css教學 >用滑動門技術設計按鈕的圖文教學_經驗交流

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

PHP中文网
PHP中文网原創
2016-05-16 12:07:391943瀏覽

本文為翻譯文章,全文網址: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中有效,你將需要寫一個類別觸發器。儘管不像圖片交換一樣糟糕。

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


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn