下面的css可以讓網頁內文有按鈕的效果。
span.btn{
background-image: linear-gradient(bottom, #ddd 50%, #eee 50%);
background-image: -o-linear-gradient(bottom, #ddd 50%, #eee 50%);
background-image: -moz-linear-gradient(bottom, #ddd 50%, #eee 50%);
background-image: -webkit-linear-gradient(bottom, #ddd 50%, #eee 50%);
/*上面為使按鈕有上下兩種顏色的效果*/
background-color:#eeeeee; /*若瀏覽器不支援上面的效果所使用的按鈕顏色*/
margin: 0 .2em; /*控制與左右兩邊文字的間隔*/
padding: .2em .8em; /*控制按鈕大小*/
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; /*按鈕文字字型*/
font-size: 12px; /*按鈕文字大小*/
line-height: 1.4;
color: #333; /*按鈕文字顏色*/
text-shadow: 0 1px 0 #FFF;
border: 1px solid #888; /*按鈕邊框顏色*/
border-radius: 2px; /*按鈕圓角效果*/
white-space: nowrap; /*確保按鈕文字不會斷行*/
}
使用範例如下
<p>這是一般內文,這是<span class="btn">按鈕</span>。</p>
這是一般內文,這是按鈕。
菜鳥工程師肉豬-版權所有不得轉載
沒有留言:
張貼留言