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

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

实例1：花式按钮

首先，我们需要在一个p容器中创建一个按钮，并使用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;}

接下来，在这个p容器中我们需要创建一个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样式在一个p容器中创建两个矩形元素，并在这个p容器上应用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图标按钮。你可以通过调整每个矩形元素的大小和角度，来达到不同的动画效果。