[分享]css3按钮动效果

CSS3 按钮动效果是给网站添加一定交互性的一种方式，它可以在用户点击、悬停或按下按钮时，为其添加一些特殊效果和动画效果。在这篇文章中，我们将介绍如何使用 CSS3 来创建不同的按钮动效果。/ 定义按...

CSS3 按钮动效果是给网站添加一定交互性的一种方式，它可以在用户点击、悬停或按下按钮时，为其添加一些特殊效果和动画效果。在这篇文章中，我们将介绍如何使用 CSS3 来创建不同的按钮动效果。

/* 定义按钮的基本样式 */
button {
  width: 120px; /* 按钮的宽度 */
  height: 40px; /* 按钮的高度 */
  border: none; /* 去掉按钮的边框 */
  border-radius: 20px; /* 按钮的圆角半径 */
  color: #fff; /* 按钮文字的颜色 */
  font-size: 18px; /* 按钮文字的字号 */
  cursor: pointer; /* 鼠标光标的形状 */
}

/* 添加鼠标悬停时的效果 */
button:hover {
  background-color: #333; /* 鼠标悬停时的背景颜色 */
}

/* 添加点击时的效果 */
button:active {
  transform: scale(0.95); /* 点击时缩小按钮 */
}

/* 添加 loading 动画效果 */
button.loading::after {
  content: ""; /* 伪元素内容 */
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 居中 */
  width: 15px; /* 宽度 */
  height: 15px; /* 高度 */
  border: 2px solid #fff; /* 边框 */
  border-radius: 50%; /* 圆形 */
  border-top-color: #999; /* 动画颜色 */
  animation: loading 1s infinite linear; /* 动画属性 */
}

/* 定义 loading 动画的属性 */
@keyframes loading {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
} 

通过以上 CSS 代码，我们可以创建一个基本的按钮，并添加了鼠标悬停、点击、loading 等动效果。你只需要在 HTML 文件中添加一个 button 标签，并为其添加相应的 class，就可以使用这些动效了。CSS3 按钮动效果可以为网站带来更好的用户体验，是一种非常实用的技巧。