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>苹果</button>
<button>三星</button>
<button>索尼</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按钮按下效果
使用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