CSS是一種很強大的網頁設計工具,其中按鈕按下后返回也是常見的效果。這個效果常常在表格、搜索框和登錄框等地方使用。
要實現這個效果,我們可以使用CSS中的:active偽類。:active偽類在按鈕或者鏈接被鼠標點擊,并且未釋放鼠標時啟動。因此,當用戶點擊按鈕,按鈕會改變樣式。在點擊事件結束時,按鈕將恢復到默認狀態。
button:active { background-color: #4CAF50; /* 點擊后的按鈕背景顏色 */ box-shadow: 0 5px #666; /* 添加投影 */ transform: translateY(4px); /* 向下移動按鈕 */ }
這里使用了background-color屬性設置按鈕被點擊后的背景顏色,使用box-shadow添加陰影,使用transform向下移動按鈕。
總的來說,使用:active偽類可以簡單地實現按鈕按下后返回的效果,讓網頁看起來更加生動。除了單純地使用:active偽類,還可以結合JavaScript實現更加復雜的按下返回效果。
上一篇css按鈕拉伸屬性
下一篇css按鈕樣式點擊 禁用