五款漂亮的纯CSS3动画按钮的实例教程

这篇教程是关于如何使用纯CSS3制作漂亮动画按钮的指南。下面我们来逐步讲解制作五款简单而优美的动画按钮。

这篇教程是关于如何使用纯CSS3制作漂亮动画按钮的指南。下面我们来逐步讲解制作五款简单而优美的动画按钮。

实例1：花式按钮

首先，我们需要在一个div容器中创建一个按钮，并使用CSS样式将其设置为圆形，如下所示：

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #fc466b;
  color: #fff;
  font-size: 1.5rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.5s;
}

然后，我们需要使用:hover伪类将按钮的背景色设置为另一个颜色，如下所示：

.button:hover {
  background-color: #3fcb67;
}

接下来，在这个div容器中我们需要创建一个span元素，用于放置图标。我们使用CSS样式来创建一个关键帧，然后将这个关键帧应用到span元素，即可实现图标动画效果：

.button span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  text-transform: uppercase;
  animation: icon 1s infinite alternate;
  margin-right: 0.5rem;
}

@keyframes icon {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

这样，我们就完成了一个简单的花式按钮。你可以通过调整span元素的动画效果，来增强按钮的吸引力。

实例2：微软Windows图标按钮

这个按钮创意灵感来源于微软Windows的图标。为了实现这个按钮的动画效果，我们需要使用CSS样式在一个div容器中创建两个矩形元素，并在这个div容器上应用hover伪类，如下所示：

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  border-radius: 10px;
  background-color: #00c5cd;
  color: #fff;
  font-size: 1.5rem;
  text-transform: uppercase;
  cursor: pointer;

  &::before,
  &::after {
    content: "";
    position: absolute;
    background-color: #fff;
    border-radius: 3px;
    transition: all 0.5s ease-in-out;
  }

  &::before {
    width: 60%;
    height: 5px;
    transform-origin: right center;
    transform: translateX(-50%) rotateZ(45deg);
  }

  &::after {
    width: 80%;
    height: 5px;
    transform-origin: left center;
    transform: translateX(-50%) rotateZ(-45deg);
  }

  &:hover::before {
    transform: translateX(-50%) rotateZ(-45deg);
    width: 80%;
  }

  &:hover::after {
    transform: translateX(-50%) rotateZ(45deg);
    width: 60%;
  }
}

这样，我们就完成了一个微软Windows图标按钮。你可以通过调整每个矩形元素的大小和角度，来达到不同的动画效果。