啟動按鈕是網(wǎng)站和應用程序中常見的按鈕類型。它們通常用于開始一項操作或過程,比如啟動一個視頻或游戲。CSS3提供了一些有用的樣式屬性,可以輕松地創(chuàng)建漂亮的啟動按鈕。
.button { display: inline-block; background-color: #3498db; border-radius: 5px; padding: 10px 20px; color: #fff; text-align: center; text-decoration: none; font-size: 16px; cursor: pointer; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); transition: background-color 0.3s ease; } .button:hover { background-color: #2980b9; } .button:active { background-color: #1abc9c; box-shadow: none; }
上面的代碼可以創(chuàng)建一個簡單的啟動按鈕。首先,我們?yōu)榘粹o設置一些基本的樣式屬性,如背景顏色、圓角和填充。我們還將文本顏色設置為白色,并使用光標屬性將按鈕的鼠標指針更改為指針。
接下來是一些變化。當用戶將鼠標移動到按鈕上時,我們使用:hover偽類將按鈕背景顏色更改為深藍色。這為按鈕添加了一些動畫效果,反映了用戶與按鈕的互動。
最后,當用戶單擊按鈕時,我們使用:active偽類將按鈕背景顏色更改為綠色,并刪除按鈕的陰影。這會讓按鈕看起來好像在被按下。
總的來說,這個啟動按鈕是一種非常基本的樣式。但是,你可以根據(jù)需要添加更多屬性和樣式來自定義你的按鈕,比如更改文本字體或調(diào)整按鈕大小。CSS3的強大樣式屬性可以讓你創(chuàng)建任何風格的按鈕,在網(wǎng)站和應用程序中方便地重復使用。
上一篇jquery boder
下一篇呼吸燈特效 css3