CSS3 button press(按鈕按下)是 Web 開發中一個非常常見的效果,使用戶在點擊按鈕時感到給予反饋,提高用戶交互體驗。
實現 CSS3 button press 效果的方法如下:
/* 定義按鈕樣式 */ button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; } /* 定義按下效果 */ button:active { transform: translateY(2px); /* 按下后向下平移 2px */ box-shadow: 0px 0px 5px #888888; /* 添加陰影效果 */ }
以上代碼定義了一個基本的按鈕樣式,包括背景顏色、內邊距、字體顏色以及圓角矩形邊框。在定義了樣式后,使用:active
偽類選擇器來實現按下效果。當用戶點擊按鈕時,通過transform: translateY(2px)
讓按鈕向下平移 2px,模擬按鈕被按下的效果,并通過box-shadow
屬性添加一個簡單的陰影效果。
以上代碼實現的效果見下圖: