CSS - 按鈕：初學者的全方位指南
你好，有抱負的網頁開發者們！今天，我們將深入CSS按鈕的奇妙世界。在本教程結束時，你將能夠創建有功能且外觀出色的按鈕。那麼，讓我們開始吧！
CSS 按鈕 - 基本範例
讓我們從一個簡單的按鈕開始。這裡是你需要的HTML和CSS：
<button class="basic-button">點我！</button>.basic-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;
}這會創造一個帶有白色文字的綠色按鈕。padding屬性給它一些大小，而cursor: pointer則在將鼠標悬停於按鈕上時將鼠標光標變為手指。
CSS 按鈕顏色
按鈕可以是任何你想要的顏色！這樣創造不同顏色的按鈕：
<button class="blue-button">藍色</button>
<button class="red-button">紅色</button>
<button class="yellow-button">黃色</button>.blue-button {background-color: #008CBA;}
.red-button {background-color: #f44336;}
.yellow-button {
background-color: #ffeb3b;
color: black;
}注意我們為黃色按鈕使用了黑色文字，以確保可讀性。
CSS 按鈕大小
你可以通過調整font-size和padding輕鬆創造不同大小的按鈕：
<button class="small-button">小</button>
<button class="medium-button">中</button>
<button class="large-button">大</button>.small-button {
font-size: 12px;
padding: 10px 24px;
}
.medium-button {
font-size: 16px;
padding: 12px 28px;
}
.large-button {
font-size: 20px;
padding: 14px 40px;
}CSS 按鈕內距
內距對按鈕大小至關重要。讓我們試試不同的內距值：
<button class="padding-button1">按鈕 1</button>
<button class="padding-button2">按鈕 2</button>.padding-button1 {
padding: 10px 20px;
}
.padding-button2 {
padding: 15px 40px;
}記住，第一個值是頂部和底部內距，第二個值是左部和右部內距。
CSS 圆角按鈕
想要柔化那些尖角嗎？使用border-radius：
<button class="rounded-button">圓角</button>.rounded-button {
border-radius: 12px;
}嘗試不同的值來獲得你所期望的圓度！
CSS 带边框的按鈕
讓我們給我們的按鈕添加一些邊框：
<button class="border-button">帶邊框的</button>.border-button {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}這會創造一個白色按鈕，帶有綠色邊框和黑色文字。
CSS 悬停按鈕
交互性是關鍵！讓我們讓我們的按鈕在悬停時改變：
<button class="hover-button">悬停我</button>.hover-button {
background-color: white;
color: black;
border: 2px solid #008CBA;
transition: 0.3s;
}
.hover-button:hover {
background-color: #008CBA;
color: white;
}transition屬性確保了平滑的顏色變化。
CSS 阴影按鈕
為你的按鈕添加深度，使用陰影：
<button class="shadow-button">阴影</button>.shadow-button {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}box-shadow屬性為按鈕添加了陰影效果。
CSS 禁用按鈕
有時候，你需要禁用按鈕：
<button class="disabled-button" disabled>禁用的</button>.disabled-button {
opacity: 0.6;
cursor: not-allowed;
}opacity屬性使按鈕看起來變暗，而cursor: not-allowed則改變光標以指示按鈕不能被點擊。
CSS 按鈕宽度
你可以使用百分比或固定值來控制按鈕宽度：
<button class="full-width">全宽</button>
<button class="half-width">半宽</button>.full-width {
width: 100%;
}
.half-width {
width: 50%;
}CSS 按鈕組
將你的按鈕分組以獲得整體外觀：
<div class="button-group">
<button>左</button>
<button>中</button>
<button>右</button>
</div>.button-group button {
float: left;
}
.button-group button:not(:last-child) {
border-right: none;
}這會創造一組水平排列的按鈕。
CSS 带边框的按鈕組
為你的按鈕組添加邊框：
<div class="border-button-group">
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>.border-button-group button {
border: 1px solid green;
float: left;
}
.border-button-group button:not(:last-child) {
border-right: none;
}CSS 垂直按鈕組
你也可以創建垂直排列的按鈕組：
<div class="vertical-button-group">
<button>頂部</button>
<button>中部</button>
<button>底部</button>
</div>.vertical-button-group button {
display: block;
width: 100%;
}
.vertical-button-group button:not(:last-child) {
border-bottom: none;
}CSS 图像上的按鈕
在圖像上放置按鈕以達到吸引眼球的效果：
<div class="container">
<img src="image.jpg" alt="圖像">
<button class="btn">按鈕</button>
</div>.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}CSS 动画按鈕
讓我們為我們的按鈕添加一些動畫：
<button class="animated-button">動畫</button>@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.animated-button {
animation: pulse 2s infinite;
}這會為按鈕創造一個跳動效果。
CSS 按鈕按下效果
模擬按鈕按下的效果：
<button class="press-button">按我</button>.press-button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}當點擊按鈕時，按鈕會出現下移的效果。
CSS 按鈕淡入效果
為你的按鈕創造一個淡入效果：
<button class="fade-in-button">淡入</button>@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in-button {
animation: fadeIn 2s;
}這個按鈕會在頁面加載時淡入。
CSS 按鈕波紋效果
最後，讓我們創造一個波紋效果：
<button class="ripple">波紋</button>.ripple {
position: relative;
overflow: hidden;
}
.ripple:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.ripple:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}這會在按鈕被點擊時創造一個波紋效果。
這就是全部！你现在已经装备了创建各种CSS按鈕的知识。记住，熟能生巧，所以不要害怕尝试这些样式并创造你自己的独特按鈕。快乐编码！
Credits: Image by storyset