CSS可以用來美化網頁中的各種元素,包括提交按鈕。如果想讓提交按鈕在點擊后跳轉到指定頁面,可以使用一些簡單的CSS代碼來實現。
button { background-color: #007bff; color: #fff; border:none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } button:active { background-color: #007bff; } button:focus { outline: none; }
上述代碼為按鈕設置了一些基本樣式,包括背景顏色、字體顏色、邊框屬性等。其中,cursor屬性設置為pointer,使鼠標移動到按鈕上時會變成手型,增加了按鈕的可點擊性。
當用戶將鼠標移到按鈕上時,會觸發:hover偽類,將按鈕的背景色改為深藍色。而當用戶點擊按鈕時,按鈕背景色又會變回淺藍色,此時觸發:active偽類。
值得注意的是,為了避免出現按鈕聚焦后樣式與:hover相同的問題,下文的代碼中還使用了:focus偽類,將按鈕的outline樣式改為none,使聚焦時不會出現虛線框。
button{ text-align:center; display:block; margin: 20px auto; width: 100px; height: 30px; line-height: 30px; } button:hover{ background-color:#ddd; } button:active{ background-color:#ccc; } button:focus{ outline: none; }
在按鈕的樣式設置完成后,就可以為其添加跳轉鏈接。下面的代碼以button元素為例,在按鈕被點擊后跳轉到百度搜索主頁。
<button onclick="location.>搜索</button>
上述代碼使用了location.href屬性,將按鈕的點擊事件綁定到了一個URL鏈接。此時只需將鏈接地址改為所需頁面的地址即可實現按鈕跳轉。
總結來說,要想美化提交按鈕并實現頁面跳轉,需要借助CSS的樣式設置和JavaScript的location.href屬性來實現。有了這些簡單的代碼,就可以輕松打造出符合心意的提交按鈕啦!
上一篇mysql報3031
下一篇css控制頁面的局部縮放