自動適應寬度的按鈕

自動適應寬度的按鈕

其實,是利用文字連結的方式來達到模擬按鈕樣式。

範例:\lab02projectindex_talentbutton.htm

語法如下:
<style type="text/css">
<!--
body{font-size:13px;}
.clearfloat { /* 這個類別應該放置於 Div 或 Break 元素上,而且應該是完整包含浮動的容器關閉前的最後一個元素 */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
h1{padding:10px 0; font-size:14px; font-weight:bold;}
p {padding:10px 0;}
img { border:0;}
a.btn{
background:url(img/按鈕背景圖片.gif) left 0;
color:#fff;
text-decoration:none;
height:30px;
float:left;
cursor:hand;
margin:0 5px 0 0;
}
a.btn:hover{background:url(img/按鈕背景圖片.gif) left -30px;height:30px;}
a.btn span{background:url(img/按鈕背景圖片.gif) right 0; padding:7px 8px 7px 0; margin:0 0 0 8px; float:left; height:16px;}
a.btn:hover span{background:url(img/按鈕背景圖片.gif) right -30px; color:#000; padding:7px 8px 7px 0; margin:0 0 0 8px; height:16px; }
-->
</style>

............................................................

<h1>自動適應寬度的按鈕</h1>
<a href="#" class="btn"><span>按鈕</span></a>
<a href="#" class="btn"><span>不是按鈕</span></a>
<a href="#" class="btn"><span>他也許是按鈕</span></a>
<a href="#" class="btn"><span>他一定不是按鈕</span></a>
<a href="#" class="btn"><span>好了,其實是用文字模擬按鈕</span></a>
張貼留言

這個網誌中的熱門文章

互補色與對比色解惑

[讀書心得] 設計思維 Design Thinking

龍岡手繪地圖製作有感