如何使按钮在：活动时具有点击效果？答案

【问题标题】：How to make the button have a click effect when :active?如何使按钮在：活动时具有点击效果？
【发布时间】：2022-08-14 19:43:06
【问题描述】：

我制作了这些按钮，我想为它们添加一个动画点击效果，这样，当点击左按钮时，它会下降（稍微向右）然后又回来。当单击右键时，它会下降（稍微向左）并重新上升。并且按钮的背景应该在最初的几秒钟内变成深红色并再次亮起。

右键 (下一个 >) 工作正常，但左边没有。请告诉我如何在左侧按钮上制作相同的动画（< 上一个）。如果需要，还建议进行任何更改。

body {font-family: Verdana, sans-serif;}

i.fa {
 font-size: 24px;
 font-weight: bold;
}

a#previous, a#next {
 text-decoration: none;
 background-color: #f00;
 color: white;
 font-size: 1.3em;
 padding: 12px 16px;
 border-radius: 7px;
}
a#next {
 float: right;
 margin-top: -8.1px;
 padding: 12.5px 16px;
 box-shadow: -3px 3px rgb(190, 0, 0);
}
a#next:active {
 animation: next_click .6s ease-in-out;
}
@keyframes next_click {
 0% {background: rgb(225, 0, 0); box-shadow: -2px 2px rgb(180, 0, 0); transform: translate(-1px, 1px);}
 100% {background: rgb(255, 0, 0); box-shadow: -3px 3px rgb(190, 0, 0); transform: translate(0, 0);}
}

a#previous {box-shadow: 3px 3px rgb(190, 0, 0);}
a#previous:active {
 background: rgb(225, 0, 0);
 box-shadow: 2px 4px rgb(180, 0, 0);
 transform: translate(-1px, 1px);
}
a#previous:hover, a#next:hover {background: rgb(225,0,0);}

<!DOCTYPE html>
<html><head>
<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">
</head>
<body>

<br><br>
<a id=\"previous\" href=\"javascript:void(0);\"><i class=\"fa fa-angle-left\"></i> Previous</a>
<a id=\"next\" href=\"javascript:void(0);\">Next <i class=\"fa fa-angle-right\"></i></a>

</body>
</html>

标签： html css button css-animations

【解决方案1】：

我就是这样做的。希望这可以帮助。

a#previous:active {
background: rgb(225, 0, 0);
box-shadow: 2px 4px rgb(180, 0, 0);
transform: translate(-1px, 1px);

/* add this animation*/
animation: previous_click 0.6s ease-in-out;
}

/*this is the keyframe for left button*/
@keyframes previous_click {
  0% {
    background: rgb(225, 0, 0);
    box-shadow: 4px 4px rgb(180, 0, 0);
    transform: translate(1px, -1px);
  }
  100% {
    background: rgb(255, 20, 20);
    box-shadow: 3px 3px rgb(190, 0, 0);
    transform: translate(0, 0);
  }
}

【讨论】：

非常感谢！但是在我尝试添加这个之后，只有背景在移动，而不是按钮。所以点击效果不正常。

【解决方案2】：

a#previous {
 float: left;
 box-shadow: 3px 3px rgb(190, 0, 0);
}
a#previous:active {
 animation: previous_click .6s ease-in-out;
}
@keyframes previous_click {
 0% {background: rgb(225, 0, 0); box-shadow: 2px 2px rgb(180, 0, 0); transform: translate(1px, 1px);}
 100% {background: rgb(255, 0, 0); box-shadow: 3px 3px rgb(180, 0, 0); transform: translate(0, 0);}
}

【讨论】：