CSS按鈕示例

CSS按鈕是網頁設計中常用的元素之一，通過CSS樣式可以輕松地創建各種樣式的按鈕。本文將為您提供一些常見的CSS按鈕示例，幫助您了解如何使用CSS來創建各種按鈕效果。

1. 普通按鈕

普通按鈕是最基本的按鈕樣式，沒有任何特殊效果。您可以使用以下CSS代碼創建一個簡單的普通按鈕：

css

.button {

padding: 10px 20px;

background-color: #f1f1f1;

border: none;

border-radius: 4px;

color: #333;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

2. 懸停效果按鈕

懸停效果按鈕在鼠標懸停時會有一些特殊的樣式變化，例如改變背景色或文字顏色。您可以使用以下CSS代碼創建一個帶有懸停效果的按鈕：

css

.button:hover {

background-color: #ddd;

color: #fff;

3. 邊框按鈕

邊框按鈕在普通按鈕的基礎上添加了邊框樣式，使按鈕看起來更加突出。您可以使用以下CSS代碼創建一個帶有邊框的按鈕：

css

.button-border {

padding: 10px 20px;

background-color: transparent;

border: 2px solid #333;

border-radius: 4px;

color: #333;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

4. 漸變按鈕

漸變按鈕通過CSS的漸變效果為按鈕添加了一些立體感。您可以使用以下CSS代碼創建一個帶有漸變效果的按鈕：

css

.button-gradient {

padding: 10px 20px;

background: linear-gradient(to right, #ff9966, #ff5e62);

border: none;

border-radius: 4px;

color: #fff;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

5. 3D按鈕

3D按鈕通過陰影和立體效果為按鈕添加了一些層次感。您可以使用以下CSS代碼創建一個帶有3D效果的按鈕：

css

.button-3d {

padding: 10px 20px;

background-color: #333;

border: none;

border-radius: 4px;

color: #fff;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

box-shadow: 0px 5px 0px #000;

這些是一些常見的CSS按鈕示例，您可以根據需要進行修改和擴展。通過使用不同的CSS樣式，您可以創建出各種不同樣式的按鈕，使您的網頁設計更加豐富多樣。希望本文能對您有所幫助！