当前位置：首页 > CSS

css制作按钮教程

2026-03-12 00:07:52CSS

基础按钮样式

使用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:hover {
  background-color: #45a049; /* 深绿色背景 */
  transition: background-color 0.3s ease; /* 过渡效果 */
}

圆角按钮

通过border-radius属性创建圆角按钮：

.rounded-button {
  border-radius: 8px; /* 圆角半径 */
}

阴影效果

为按钮添加阴影增强立体感：

css制作按钮教程

.shadow-button {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* 阴影效果 */
}

禁用状态

设置按钮禁用时的样式：

.disabled-button {
  opacity: 0.6; /* 透明度 */
  cursor: not-allowed; /* 禁用指针 */
}

动画按钮

创建点击动画效果：

css制作按钮教程

.animated-button {
  transition: all 0.3s; /* 所有属性过渡 */
}
.animated-button:active {
  transform: scale(0.95); /* 点击时缩小 */
}

渐变背景

使用CSS渐变创建更丰富的背景效果：

.gradient-button {
  background: linear-gradient(to right, #4CAF50, #2196F3); /* 从左到右的渐变 */
}

边框按钮

创建带边框的按钮样式：

.bordered-button {
  background-color: transparent;
  color: #4CAF50;
  border: 2px solid #4CAF50;
}

图标按钮

在按钮中添加图标：

<button class="icon-button">
  <i class="fa fa-download"></i> 下载
</button>

.icon-button {
  padding-left: 40px; /* 为图标留出空间 */
  position: relative;
}
.icon-button i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}