CSS 制作按钮

在本文中，我们将介绍如何使用CSS来制作各种样式的按钮。按钮是Web设计中非常重要的元素之一，它们可以被用于表单提交、链接跳转等多种交互场景。使用CSS制作的按钮可以为网页增添美观、互动和用户友好的特性。

阅读更多：CSS 教程

基础按钮制作

首先，我们可以使用CSS来制作最基础的按钮样式。最简单的方式是通过设置按钮的边框样式、背景颜色和文字颜色。以下是一个基础的CSS按钮代码示例：

button {
  border: none;
  border-radius: 4px;
  background-color: #008CBA;
  color: white;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px;
  cursor: pointer;
}

此代码使用了button标签来表示按钮元素，指定了该按钮的样式规则。在该样式中，border属性指定了按钮边框的类型和粗细；border-radius属性指定了边框圆角的大小；background-color属性指定了按钮的背景颜色；color属性指定了按钮文字的颜色；padding属性指定了按钮内部填充物的大小。它们一起定义了基础按钮的样式。

鼠标悬浮效果

按钮之所以能够扮演重要的交互角色，是因为用户会通过鼠标悬浮来主动或者被动地去点击它们。因此，设计鼠标悬浮效果是一个重要的任务。我们可以通过CSS的hover伪类来实现这一功能。

button:hover {
  background-color: #005f6b;
}

此代码片段中，我们在原有的基础按钮样式上添加了一个hover伪类，并且修改了按钮的背景颜色。这样的效果就是当鼠标移动到按钮内时，背景色将变成新的颜色。

多种形态按钮

除了基础按钮外，我们还经常需要制作其他样式的按钮。比如，有些样式的按钮需要全部或部分去掉边框；还有一些特殊样式的按钮需要用图标代替文字。下面是一些不同形态的按钮的例子：

空心按钮

空心按钮通常用于凸显某一功能或者界面元素，它的样式是没有背景颜色，只有边框。以下是一个简单的CSS例子：

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

我们可以在button标签中加入.outline类来制作空心按钮。在样式中，我们将边框设置为黑色，并将背景颜色设置为透明。这样元素就呈现出了空心的样式。

带图标按钮

在某些情况下，我们需要给按钮增加图标来提高用户体验和可读性。这个时候，我们通常可以使用字体图标或者SVG图标。

<button class="has-icon">
  <i class="fa fa-flag"></i> 点赞
</button>

这个例子展示了如何使用FontAwesome字体图标库给按钮增加图标。我们在按钮中增加了一个i标签，并加入FontAwesome的fa-flag类，并在按钮中加入.has-icons类。接下来，我们可以用CSS设置该元素的基础样式和图标的位置。

button.has-icon {
padding-left: 40px;
position: relative;
}

button.has-icon i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
}

我们在CSS样式中为.has-icon类设置了一个padding-left属性值，留出图标的位置，并设置position属性为relative。接下来，我们给图标增加了一个position属性为absolute，并且设置了图标的位置为按钮中心左侧。这样图标就会位于按钮文字的左侧，并且与文字垂直居中。

自定义按钮样式

一般情况下，我们在Web设计中不会只使用文字和简单背景颜色来制作按钮。如果需要更复杂的样式，我们可以使用一些进阶技术来实现。例如，我们可以使用CSS渐变、阴影、动画等属性来制作漂亮的按钮。

渐变按钮

使用CSS渐变可以实现更丰富的颜色效果，使按钮看上去更加生动活泼。以下是一个简单的渐变按钮CSS样式：

button.gradient {
background-image: linear-gradient(to bottom right, #5f2c82, #49a09d);
}

我们利用background-image属性进行线性渐变背景设置，使用to bottom right参数设置颜色渐变的方向。这个例子中，我们将按钮的背景颜色设为从紫色渐变到青色。

阴影按钮

使用CSS属性还可以制作出阴影按钮的效果。这里使用线性渐变和box-shadow属性来制作阴影按钮。

button.shadow {
background-image: linear-gradient(to bottom, #de6262, #ffb88c 60%, #ffda79 85%);
border: none;
color: white;
padding: 12px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 2px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

在这个CSS样式中，我们使用相同的线性渐变来设置按钮背景颜色。我们还对按钮的阴影进行了设置，使用了box-shadow属性来为按钮增加一个轻微的阴影。这样的效果会让按钮看上去更加有层次感。