今天我想和大家分享一個(gè)非常好看的提交按鈕CSS代碼。這個(gè)提交按鈕的樣式簡單而不失美感,非常適合用在各種表單中。讓我們一起來看一下它的代碼吧:
button { padding: 15px 30px; border: none; background-color: #ff7f50; color: #fff; font-size: 20px; text-transform: uppercase; border-radius: 30px; transition: all 0.3s ease; cursor: pointer; } button:hover { background-color: #ff6347; }
首先,我們定義了一個(gè)button元素的樣式,包括padding、border、background-color、color、font-size、text-transform、border-radius、transition和cursor等屬性。其中padding用于設(shè)置按鈕內(nèi)部文字的上下左右間距,border設(shè)置為none,可以使按鈕的邊框消失。background-color和color分別設(shè)置按鈕的背景色和文字顏色。font-size設(shè)置文字大小,text-transform將所有文字轉(zhuǎn)化為大寫字母,border-radius設(shè)置按鈕的圓角半徑,transition設(shè)置按鈕鼠標(biāo)懸停時(shí)的過渡效果,cursor將光標(biāo)設(shè)置為手型,表示這是一個(gè)可點(diǎn)擊的按鈕。
接下來,我們定義了一個(gè):hover偽類,用于設(shè)置鼠標(biāo)懸停在按鈕上時(shí)的樣式。我們將背景色設(shè)置為淺橘色,與按鈕的原始顏色形成一種漸變效果,使按鈕在互動性方面更加生動有趣。
總的來說,這個(gè)提交按鈕CSS代碼簡單而不失精美,非常適用于各種表單中。我們可以按照自己的需求對按鈕的樣式進(jìn)行微調(diào),使其更加符合我們的設(shè)計(jì)理念。