基础 CSS 按钮

简介

按钮是网页设计中常用的一种元素，可以让用户与网页进行交互。CSS 提供了丰富的样式和效果来创建各种各样的按钮，可以让网页设计更加丰富多彩。本文将介绍如何使用 CSS 创建基础的按钮样式，并给出一些常用的效果。

可点击的基础按钮

<button class="basic-button">按钮</button>

.basic-button {
  border: 1px solid #000; /* 设置边框 */
  background-color: #fff; /* 设置背景色 */
  color: #000; /* 设置文字颜色 */
  padding: 8px 16px; /* 设置内边距 */
  font-size: 16px; /* 设置文字大小 */
  cursor: pointer; /* 设置鼠标悬停样式 */
  border-radius: 4px; /* 设置圆角 */
  
  /* 鼠标悬停时的样式 */
  &:hover {
    background-color: #000; /* 设置背景色 */
    color: #fff; /* 设置文字颜色 */
  }
}

上面的代码创建了一个简单的按钮样式，具有以下特点：

• 边框为 1 像素黑色实线；
• 背景色为白色；
• 文字颜色为黑色；
• 内部有 8 像素上下、16 像素左右的内边距；
• 文字大小为 16 像素；
• 鼠标悬停时背景色变为黑色，文字颜色变为白色。

非交互的基础按钮

与可点击按钮不同，非交互按钮通常用于展示信息或作为装饰元素。

<span class="basic-span">按钮</span>

.basic-span {
  border: 1px solid #000; /* 设置边框 */
  background-color: #fff; /* 设置背景色 */
  color: #000; /* 设置文字颜色 */
  padding: 8px 16px; /* 设置内边距 */
  font-size: 16px; /* 设置文字大小 */
  border-radius: 4px; /* 设置圆角 */
}

上面的代码创建了一个非交互的按钮样式，与可点击按钮相比，去掉了鼠标悬停样式。

常用的效果

渐变背景色

.gradient-button {
  background-image: linear-gradient(to bottom, #9dd2ea, #218eae); /* 设置渐变背景色 */
}

边框渐变

.border-gradient-button {
  border: 1px solid transparent; /* 设置透明边框 */
  background-clip: padding-box; /* 设置背景颜色只填充 padding 区域 */
  background-image: linear-gradient(to bottom, #9dd2ea, #218eae); /* 设置渐变背景色 */
  -webkit-background-clip: padding-box; /* Safari 和 Chrome */
  -moz-background-clip: padding; /* Firefox */
}

悬停动画

.hover-animation-button {
  transition: all .3s ease-in-out; /* 设置动画过渡效果 */
  &:hover {
    transform: translateY(-3px); /* 设置悬停时的动画效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, .3); /* 添加阴影 */
  }
}

总结

本文介绍了如何使用 CSS 创建基础的按钮样式，以及一些常用的效果。通过掌握这些知识，可以让网页设计更加丰富多彩，提升用户体验。