CSS按钮点击效果用法介绍(实现按钮点击动效的套路)

一、按钮状态

按钮状态在网页设计中扮演着非常重要的角色。按钮的状态有三种：

• 默认状态：即按钮还未被鼠标悬停或点击时，一般会使用比较浅的颜色背景。
• 悬停状态：即鼠标悬停在按钮上时。在这种状态下，通常的实现方式是改变按钮的颜色背景、字体颜色和鼠标样式为指针。
• 点击状态：即鼠标点击按钮时，可以使用伪类（:active）来改变按钮的样式。

默认状态：

.btn {
  background-color: #fff;
  border: 1px solid #999;
  color: #333;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 16px;
}

悬停状态：

.btn:hover {
  background-color: #eee;
  color: #555;
  border: 1px solid #555;
  cursor: pointer;
}

点击状态:

.btn:active {
  background-color: #ccc;
  color: #333;
  border: 1px solid #333;
}

二、渐变色背景按钮

渐变色背景的按钮在Web设计中也是比较常用，可以显得比较有层次感。

CSS代码：

.btn-gradient {
  background: linear-gradient(to bottom, #4e79a7 0%, #283e51 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 10px 15px;
  font-size: 16px;
  text-transform: uppercase;
}
.btn-gradient:hover {
  background: linear-gradient(to bottom, #283e51 0%, #4e79a7 100%);
}
.btn-gradient:active {
  background: linear-gradient(to bottom, #283e51 0%, #4e79a7 100%);
  box-shadow: inset 0px 0px 5px #888;
}

按钮效果：

渐变色按钮

三、圆形按钮

许多设计师都会经常使用圆形按钮以增加设计感，具有很高的可操作性。实现圆形按钮有两种方式：使用圆角边框半径（border-radius）或者使用transform属性实现。下面介绍两种实现方式。

使用border-radius属性：

.btn-circle {
  border-radius: 50%;
  background-color: #4e79a7;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 10px 15px;
  font-size: 16px;
  text-transform: uppercase;
}
.btn-circle:hover {
  background-color: #283e51;
}
.btn-circle:active {
  background-color: #283e51;
  box-shadow: inset 0px 0px 5px #888;
}

使用transform属性：

.btn-circle-transform {
  width: 50px;
  height: 50px;
  background-color: #4e79a7;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  padding: 10px 15px;
  font-size: 16px;
  text-transform: uppercase;
  transition: transform 0.5s ease;
}

.btn-circle-transform:hover {
  transform: scale(1.2);
  background-color: #283e51;
}

.btn-circle-transform:active {
  transform: scale(0.8);
  background-color: #283e51;
  box-shadow: inset 0px 0px 5px #888;
}

按钮效果：

圆形按钮1
圆形按钮2

四、带边框动画效果的按钮

带边框动画效果的按钮是一种比较流行的设计方式。当用户点击该按钮时，会通过CSS动画（transition）呈现出边框线条翻转的效果。

.btn-border {
  border: 2px solid #333;
  border-radius: 5px;
  color: #333;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
  font-size: 16px;
  padding: 10px 15px;
}
.btn-border:hover {
  background-color: #333;
  color: #fff;
}
.btn-border:active {
  box-shadow: inset 0px 0px 5px #888;
  border: 2px solid #cc0000;
  color: #cc0000;
  transform: translateY(2px);
}

按钮效果：

带边框动画效果按钮

五、3D按钮

在网页设计中，使用3D效果的按钮可以增加按钮的立体感，让按钮更加生动有趣。实现3D按钮可使用box-shadow属性和transform属性来完成。

使用box-shadow，transform属性实现：

.btn-3d {
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  margin: 20px;
  padding: 15px 30px;
  position: relative;
  text-transform: uppercase;
  width: 200px;
}
.btn-3d:before {
  transition: all 0.5s;
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  border-radius: 30px;
}
.btn-3d:hover:before {
  top: -16px;
  left: -16px;
  right: -16px;
  bottom: -16px;
}
.btn-3d:active {
  transform: translateY(2px);
}

按钮效果：

3D按钮

六、带图标的按钮

在网页设计中，带图标的按钮可以让按钮更加直观，用户能够更好理解按钮功能。使用CSS可以轻松实现带图标的按钮，可以在button元素中添加一个i元素，并通过CSS样式设置图标的位置、大小等。同时需要引用第三方字体图标库，例如Font Awesome。

CSS代码：

.btn-icon {
  background-color: #4e79a7;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 10px 15px 10px 50px;
  position: relative;
  transition: all 0.3s ease;
}
.btn-icon i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}
.btn-icon:hover {
  transform: scale(1.1);
}
.btn-icon:active {
  box-shadow: inset 0px 0px 5px #888;
  background-color: #283e51;
} 

按钮效果：

发送邮件

七、翻转按钮

翻转按钮在网页设计中，可以增加用户交互效果，同时也是一种比较流行的设计方式。实现翻转按钮可使用CSS 3D转换来实现，包括按钮的正反面实现。下面是使用CSS 3D转换制作翻转按钮的实现代码。

.btn-flip {
  position: relative;
  width: 200px;
  height: 40px;
  background-color: #4e79a7;
  color: #fff;
  border: none;
  font-size: 20px;
  cursor: pointer;
  text-transform: uppercase;
  perspective: 1000px;
}
.btn-flip:after {
  transition: all 0.5s;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #283e51;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
}
.btn-flip:hover:after {
  transform: rotateY(0);
}
.btn-flip span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-flip:active {
  box-shadow: inset 0px 0px 5px #888;
  background-color: #283e51;
} 

按钮效果：

翻转按钮

八、卡片按钮

卡片按钮可以让按钮的外观非常时尚，与此同时，保持按钮优秀的可用性和易用性。使用卡片按钮还可以配合滑动、翻转、弹跳等其他交互效果制作出更丰富的交互式页面。下面是使用CSS制作卡片按钮的实现代码。

.btn-card {
  background-color: #4e79a7;
  border: none;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  margin: 40px 20px;
  padding: 20px 40px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  transition: transform 0.4s ease-in-out;
}
.btn-card:hover {
  transform: translateY(-10px);
}
.btn-card:before, .btn-card:after {
  content: "";
  position: absolute;
  z-index: -1;
}
.btn-card:before {
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  border-radius: 10px;
  transition: opacity 0.4s, transform 0.4s;
}
.btn-card:hover:before {
  opacity: 0;
  transform: translateY(10px);
}
.btn-card:after {
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.4s, transform 0.4s;
}
.btn-card:hover:after {
  opacity: 1;
  transform: translateY(-10px);
}
.btn-card:active {
  box-shadow: inset 0px 0px 5px #888;
  background-color: #283e51;
} 

按钮效果：

卡片按钮