CSS按鈕點擊字體下移是一種常見的效果。當用戶點擊按鈕時,字體會下移并且按鈕的顏色可能會發生變化,這樣可以讓用戶更清晰地感知到自己的操作。下面是一個實現這種效果的CSS樣式:
button { font-size: 16px; padding: 10px 20px; background-color: #0075ff; color: #fff; border: none; border-radius: 20px; cursor: pointer; transition: all 0.2s ease-in-out; } button:focus { outline: none; } button:active { transform: translateY(2px); }
在這個樣式中,我們定義了一個基本的按鈕樣式,并通過:hover偽類為其添加了一個過渡效果,當鼠標懸停在按鈕上時,背景顏色漸變到另一個顏色。我們還使用:focus偽類來刪除按鈕的默認外觀,這可以防止在點擊按鈕時出現以前的邊框顏色。最后,我們通過:active偽類使按鈕在被點擊時向下移動兩個像素。
這種效果可以通過以下方式進一步優化:
button:active { transform: translateY(2px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); }
在這個改進的樣式中,我們添加了一個框陰影,這可以使按鈕看起來更有層次感。我們使用rgba()來定義一個半透明的黑色,在按鈕上方添加一層微小的陰影。
總的來說,CSS按鈕點擊字體下移效果并不復雜,但可以使您的網站看起來更加現代和專業。