CSS實現按鈕高光效果十分簡單,只需要對按鈕添加一些特殊的屬性即可。
button { background-color: #4CAF50; /* 按鈕正常顏色 */ color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } /* 鼠標移上去時的效果 */ button:hover { background-color: #3e8e41; } /* 高光效果 */ button:active { background-color: #3e8e41; box-shadow: 0 2px #666; transform: translateY(2px); }
如上代碼所示,我們在CSS中通過對按鈕的:hover和:active屬性進行設置,分別實現了當鼠標移到按鈕上時的高亮效果和當鼠標按下去時的高光效果。具體來說,:hover屬性設置了按鈕的背景顏色和文本顏色,實現了高亮效果。:active屬性設置了按鈕的背景顏色、陰影和位置偏移,實現了高光效果。
在實際應用中,我們可以對不同的按鈕添加不同的高光效果,以增加頁面的視覺效果和用戶的交互體驗。
上一篇php redis 日志
下一篇css實現注冊完成進度