css3 漂亮按钮样式-五个漂亮的纯CSS3动画按钮实例教程

本教程是关于如何使用纯CSS3制作漂亮的动画按钮。 下面我们逐步讲解如何制作五个简单又美观的动画按钮。

示例 1：花式按钮

首先，我们需要在 div 容器内创建一个按钮css3 漂亮按钮样式，并使用 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元素的动画效果来提高按钮的吸引力。

Python技术站热门推荐：

PDF电子票据识别软件，一键识别电子票据并导出Excel！

十大数据挖掘软件！

人工智能的十大功能！

示例 2：Microsoft Windows 图标按钮

这个按钮的灵感来自于 Google Windows 的图标。 为了实现这个按钮的动画效果，我们需要使用CSS样式在一个div容器中创建两个正方形元素，并将hover伪类应用到这个div容器中css3 漂亮按钮样式，如下所示：

.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%;
  }
}

这样，我们就完成了一个Google Windows图标按钮。 您可以通过调整每个方形元素的大小和角度来实现不同的动画效果。

Python技术站热门推荐