CSS寫返回按鈕非常簡單,只需要使用偽類選擇器 :before 或 :after,加上 content屬性即可。例如:
.back-btn:before { content: "返回"; }
以上代碼定義了一個返回按鈕,使用:before偽類選擇器在按鈕前添加了“返回”兩個字。接下來我們需要寫一些樣式來美化按鈕,比如背景色、字體顏色、邊框等等。以下是一個完整的例子:
.back-btn:before { content: "返回"; display: inline-block; height: 30px; line-height: 30px; padding: 0 15px; background-color: #007bff; color: #fff; border-radius: 5px; text-align: center; font-size: 14px; } .back-btn:hover:before { background-color: #0056b3; } .back-btn:active:before { background-color: #00345c; }
以上代碼定義了一個高亮藍色的返回按鈕,當鼠標懸停時顏色深一些,按下時顏色再深一些。我們可以根據自己的需求來調整按鈕的顏色、大小和字體等。
最后,將按鈕添加到網頁上的方法也很簡單:
以上代碼定義了一個標簽,使用 href 屬性指定了返回上一頁的行為,并給這個標簽添加了 back-btn 的樣式。這個按鈕現在就可以放在我們需要的位置,幫助用戶輕松返回上一頁。