css - 按鈕教學

作者：小角落..│2008-02-06 15:20:59│巴幣：0│人氣：1926

本文引用自此
本文引用自此

如果這篇看的一點都不懂的話，請看css - 超級新手教學
如果找不到自己想要的，請看css - 導引 (看圖說故事)
如果沒有自己想要的效果，請看css - 語法說明
想要找小細部的設定，請看css - 各區塊分類解說圖(2009/4/13)
(不過這要20元喔!!不想花錢的可以看巴哈提供的分類區塊解說圖)

這裡是其他大大的css教學css - 巴哈css教學網
色碼表、上傳空間、螢幕檢色器css - 好用軟體+好文推薦

這教學是寫給我自己看的..
可以問問題..但是我自己也不是很懂XD

◎圖片要上傳到http://..某處..不能放在自己電腦..
我是放在這裡樂多日誌(不過沒有資料夾可以編輯,有點麻煩><)

1.這次要改的是按鈕..button2：藍色　　button3：紫色　　button4：綠色

2.打開『小屋首頁』> 『自訂面板』

3.下面這串文字原本沒有,將以下複製貼到CSS最下面,自行修改,.button2：藍色　　button3：紫色　　button4：綠色

/*---------------------------按鈕：------------------------------*/
.button3,.button4{/*-----勇造下的按鈕+[給紅心]+[搜尋]-----*/
border-top:#757575 0px dashed;
border-right:#757575 0px dashed;
border-bottom:#757575 0px dashed;
border-left:royalblue 0px solid;
background:none;
text-align: center;
color:#000;}

.button2,.button_h2{/*-----[看更多]+[訂閱他的小屋]-----*/
background:none;
border:#000 0px dashed;
}

.button_c1{color:#000;} /*按鈕文字顏色*/
/*.button_c1 img{display:none;}*//*--隱藏收藏『+』--*/

/*------------------滑鼠移入按鈕---------------*/
.button2:hover,.button3:hover,.button4:hover{
background:none;
border-top:#757575 0px dashed;
border-right:royalblue 0px solid;
border-bottom:royalblue 0px dashed;
border-left:royalblue 0px solid;
}---5/2改

4.『完成』

藍色部分按鈕的文字顏色(3/5補充)
.button_c1{color:#F5F1E8;}
.button_c1 img{display:none;}/*隱藏收藏『+』*/

另外..給紅心的按鈕..可以另外設定..邊框..高度------2008.3.10
.apprise_bg input{
position:relative;
top:20px;/*這一行就是改變你的上下位置*/
border: 1px dashed #f5a6c0;
color:#cc7382;
}
可以看這篇..相關設定
css - 給紅心

收藏人數
1.就是這裡

2.在這裡設定
.elite_ppl{
color:#49A1B3;
font-weight:bold;
font-size:12px;
border:1px solid #9A9A9A;
background-color:#FFF;
}/*收藏人數文字顏色和底線框色*/

若要連結會跳動,在css最下面增加這段文字

/*連結跳動*/
a{
text-decoration:none}
a:hover{
position: relative; top: 1px;left:3px;}

↑這段會使得【即時通知】跳動，點不到喔! ----2010/5/25

『訂閱他的小屋』
1.就是這裡

2.以下複製貼上
/*-------訂閱小屋按鈕(一般狀態)------------*/
.home_order_button{
background: url() repeat;
background:transparent;
width:100px;
text-align: center;
border-top:;
border-right:;
border-bottom:;
border-left:;
color:deeppink;
}

/*-------訂閱小屋按鈕(一般狀態的字顏色)------------*/
.banner a:visited{
color:#c93030;
background:transparent;
}

/*-------訂閱小屋按鈕(滑鼠移入狀態)------------*/
.home_order_button:hover{
background: url() repeat;
background:transparent;
width:100px;
text-align: center;
border-top:;
border-right:;
border-bottom:;
border-left:;
color:#c93030;
text-decoration: underline;
}

3.若是之前寫過
.banner_t1{
color:#c93030;
font-weight:bold;
filter: Alpha(opacity=0);
}
.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color:#c93030;
font-weight:bold;
text-decoration:inherit;
font-size:14px;
}/*暱稱和帳號文字*/
以上那段文字的..
會以2.為優先處理..我也不知道為什麼><
自己試試看吧..

◎如果要改成純色,可將這行background: url(http://網址) repeat;
改成:background-color:#F6CDD7;　#f6cdd7為色碼..可自行更改..英文的話不用加『#』,可參考色碼表
◎若要使圖片完全透明的話,可改成background:transparent;
◎若要使圖片半透明,可寫 filter:Alpha(opacity=70,finishOpacity=1,style=0);更改70這個數字的大小即可。

ps.repeat:圖片重複　　　　　no-repeat:圖片不重複

邊框　　
　　border-top:#FFF 1px dashed;/*邊框上面顏色寬度樣式*/
　　border-right:#FFF 1px dashed;/*邊框右邊*/
　　border-bottom:#FFF 1px dashed;/*邊框下面*/
　　border-left:#FFF 1px dashed;/*邊框左邊*/

　　邊框樣式屬性有：
　　　　dotted：點狀線　　　dashed：虛線　　　solid：實線　　　outset:凸起狀
　　　　double：雙實線　　　groove：溝道狀　　ridge：山脊狀　　inset：凹陷狀

　　當四邊都一樣時，可寫成
　　　　 border: 1px dashed #fff; /* 邊框寬度樣式顏色 */

紫色.綠色的按鈕~
除了這裡邊框的設定之外..
裡面還會有一圈body顏色的實線設定喔!!!-----------2008.3.10
請看下圖..我設定藍色的虛線框線..
我背景是白色的..