一款纯css3实现的鼠标经过按钮特效教程

一款纯css3实现的鼠标经过按钮特效教程是一种通过CSS3动画效果来实现的按钮特效，这种效果多用于网站或APP的用户交互设计上。下面是详细攻略：

步骤一： 准备HTML结构

首先需要准备好HTML结构，按照网站的设计规范，创建一个按钮容器，命名为button。

<div class="button">BUTTON</div>

步骤二： 确定按钮的基本样式

在CSS中定义按钮的基本样式，并设置按钮的基本属性。这里我们可以先设置按钮的宽高、背景颜色、字体颜色、内边距等。这些属性可以自行根据需求设置。

.button {
  width: 150px;
  height: 50px;
  background-color: #ff5555; 
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  border-radius: 5px; 
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  transition: all .3s ease-in-out; 
}

步骤三：添加鼠标经过的样式

为了添加鼠标经过的效果，我们需要利用CSS3动画效果来完成。这里我们利用hover伪类选择器，设置鼠标经过时的背景颜色和字体颜色等，完成按钮的hover动画效果。

.button:hover {
  background-color: #fff;
  color: #ff5555;
  border: 1px solid #ff5555;
  transition: all .3s ease-in-out;
}

步骤四：添加按钮的凹凸效果

添加凹凸效果时，我们首先要给按钮容器添加伪元素before和after，并为它们设置宽度、高度等基本属性。

.button::before,
.button::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
}

然后，我们需要设置before和after的背景颜色，这里我们可以利用rgba设置半透明色，并设置按钮颜色作为渐变色的开始和结束颜色。

.button::before {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.05));
  transition: opacity .3s, transform .3s;
  transform: translate3d(-7px, -7px, 0);
}

.button::after {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.5));
  transition: opacity .3s, transform .3s;
  transform: translate3d(7px, 7px, 0);
}

接着，我们在:hover状态下，将前后两个伪元素的opacity设置为1，同时利用transform属性，实现凹凸的特效。

.button:hover::before,
.button:hover::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

示例说明

示例一：更改按钮颜色和边框颜色

此时，鼠标经过按钮时，按钮背景颜色、字体颜色和边框颜色都会改变。同时，按钮也会产生凹凸效果。

.button:hover {
  background-color: pink;
  color: #fff;
  border: 4px dashed #fff;
  transition: all .3s ease-in-out;
}


.button:hover::before {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.5), rgba(221, 19, 199, 0.6));
  transition: opacity .3s, transform .3s;
  transform: translate3d(-7px, -7px, 0);
}

.button:hover::after {
  background: linear-gradient(45deg, rgba(221, 19, 199, 0.6), rgba(255, 255, 255, 0.5));
  transition: opacity .3s, transform .3s;
  transform: translate3d(7px, 7px, 0);
}

示例二：更改按钮大小和凹凸变形程度

在这个示例中，鼠标经过按钮时，按钮的大小和凹凸特效的变形程度都会改变。

.button:hover {
  background-color: pink;
  color: #fff;
  border: 4px dashed #fff;
  transition: all .3s ease-in-out;
  width: 200px; 
  height: 70px; 
}


.button:hover::before {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.5), rgba(221, 19, 199, 0.6));
  transition: opacity .3s, transform .3s;
  transform: translate3d(-10px, -10px, 0) rotate(10deg);
}

.button:hover::after {
  background: linear-gradient(45deg, rgba(221, 19, 199, 0.6), rgba(255, 255, 255, 0.5));
  transition: opacity .3s, transform .3s;
  transform: translate3d(10px, 10px, 0) rotate(10deg);
}

通过这些示例可以清晰地看到，通过更改按钮的大小、凹凸变形程度和颜色等等，我们能够创建出各种各样的炫酷按钮特效。