css基础制作按钮

基础按钮样式

使用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; /* 鼠标悬停时显示手型 */
  border-radius: 8px; /* 圆角 */
}

悬停效果

添加鼠标悬停时的状态变化，增强交互体验：

.button:hover {
  background-color: #45a049; /* 悬停时更深的绿色 */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* 添加阴影 */
}

点击效果

模拟按钮被按下的状态：

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
  transform: translateY(1px); /* 轻微下移 */
}

禁用状态

设置按钮禁用时的样式：

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed; /* 显示禁用光标 */
}

不同风格的按钮

创建多个颜色变体来表示不同操作：

.button-danger {
  background-color: #f44336; /* 红色 */
}

.button-warning {
  background-color: #ff9800; /* 橙色 */
}

.button-info {
  background-color: #2196F3; /* 蓝色 */
}

边框按钮

创建带有边框的按钮样式：

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

.button-outline:hover {
  background-color: #4CAF50;
  color: white;
}

图标按钮

在按钮中添加图标：

.button-icon {
  padding: 10px 20px 10px 40px;
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: 10px center;
}

响应式按钮

确保按钮在不同设备上显示良好：

@media screen and (max-width: 600px) {
  .button {
    width: 100%;
    display: block;
    margin: 10px 0;
  }
}

动画效果

为按钮添加过渡动画：

.button-animated {
  transition: all 0.3s ease;
}

.button-animated:hover {
  transform: scale(1.05); /* 轻微放大 */
}