[分享]css3按钮点击代码

CSS3按钮点击效果是网页设计中常见的效果，它可以为网页增添交互性和美观性。下面是一个使用CSS3实现的简单的按钮点击效果代码。.btn { display: inlineblock; padding...

CSS3按钮点击效果是网页设计中常见的效果，它可以为网页增添交互性和美观性。下面是一个使用CSS3实现的简单的按钮点击效果代码。

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.btn:hover {
  background-color: #0054a8;
}

.btn:active {
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(2px);
} 

首先，我们定义了一个类名为"btn"的按钮样式。它具有以下属性：

• display: inline-block; 允许按钮元素在同一行内显示
• padding: 10px 20px; 四周内边距为10个像素和20个像素
• background-color: #007bff; 背景颜色为蓝色
• color: #fff; 文字颜色为白色
• border-radius: 5px; 圆角为5个像素
• transition: all 0.2s ease-in-out; button鼠标划过时的渐变过渡效果，定义了所有属性的变换，持续时间为0.2秒
• cursor: pointer; 鼠标指针为手型

用户鼠标划过按钮时，按钮将会呈现出一种新的样式，这个样式由"btn:hover"定义。它仅是改变了背景颜色，这里使用了更深的蓝色。

用户点击按钮时，我们使用了"btn:active"属性。它的表现与":hover"相同，但是在点击效果中，我们添加了一个阴影的效果并移动了按钮的位置，以模拟按钮被按下了的效果。

以上就是CSS3实现简单按钮点击效果的全部代码，在实现美观的同时还具有很好的交互性，可以有效增强网页的用户体验。