How to make the button have a click effect when :active?-CodePudding

I made these buttons and I want to add an animation click effect to them such that, when the left button is clicked it goes down (slightly to the right) and comes back up. And when the right button is clicked it goes down (slightly to the left) and comes back up. And the background of the button should become dark red in the first few seconds and light up again.

The right button (NEXT >) works fine but the left one doesn't. Please tell me how to make the same animation on the left button (< PREVIOUS). Also suggest any changes if needed.

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 ></i> Previous</a>
<a id="next" href="javascript:void(0);">Next <i ></i></a>

</body>
</html>

CodePudding user response：

This is how I did it. Hope this helps.

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);
  }
}

CodePudding user response：

This is the code for PREVIOUS button:

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);}
}