在網頁設計中,按鈕是非常重要的元素。它不僅僅用于進行頁面上的操作,也能夠為網頁提供視覺上的引導和美感。在CSS中,我們可以通過不同的屬性和樣式來創建不同類型和風格的按鈕。
目前,CSS中常見的按鈕類型包括普通按鈕,圓角按鈕,3D按鈕和透明按鈕等。不同類型的按鈕可以用不同的樣式和屬性來實現。下面是一些常用的CSS按鈕樣式:
/* 普通按鈕 */ button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }
/* 圓角按鈕 */ .button { background-color: #e7e7e7; color: black; border: 2px solid #555555; border-radius: 12px; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }
/* 3D按鈕 */ button { box-shadow: 0px 5px 0px 0px #3e7327; background-color:#699215; border-radius:6px; display:inline-block; cursor:pointer; color:#ffffff; font-size:15px; padding:6px 24px; text-decoration:none; text-shadow:0px 1px 0px #3e7327; }
/* 透明按鈕 */ button { background-color: transparent; border: 2px solid black; color: black; padding: 14px 28px; font-size: 20px; cursor: pointer; transition: 0.5s; } button:hover { background-color: black; color: white; }
以上是常用的一些CSS按鈕樣式,把它們應用于你的網頁設計中,可以為你的網頁添加一些動態和美感。