反逆的御宅族( ACG OTAKU OF THE REBELLION)

今天跟大家分享，我自己痞客邦CSS實戰改 繼續閱讀 按鈕吧！乾貨來囉~

語法共有三層

.more{}

.more a{}

.more a:hover{}

這欄位主要設定按鈕左邊的距離，以及原本文字可以縮排讓它不見。

語法：

margin-left:OOOpx;  (設定距離左距多少px，可以試調看看到喜歡的位置。)

text-indent:OOOpx;  (text-indent主要是縮排功能，設定-9999就可以把原本的 繼續閱讀 擠到畫面之外，不然會顯示擋到原本位置)

這邊設定 繼續閱讀 按鈕滑鼠移入變化前的語法，display設定為block，width(寬度)和height(高度) 需要針對圖片大小做設定。

建議可以使用PS自己繪製喜歡的圖片，變化前與變化後兩張，記得存成PNG檔才有機會做弧形背景透明，上傳痞客邦相簿，點選相片的原始碼，後面那一串就是圖片的位置，複製貼到下面語法中。

語法：

.more a{
display:block;
width:OOOpx;
height:XXXpx;
background:url(變化前圖片網址) ;
}

注意這邊不需要再設定no-repeat，會導致滑鼠移入後左右跑來跑去的現象發生，因為上面已經設好寬跟高了。

語法：

.more a:hover{
background:url(變化後圖片網址);
}

如果想要增加時間變化，可以加上transition-duration

transition-duration:1s; (變化時間1秒，或零點幾秒都可以)

簡單分享希望有幫助到大家喔！讓原本醜醜的繼續閱讀變不見吧！之後再出一系列實戰CSS的乾貨，大家再多多支持！