How to change a css after selector for a specific id – Html

I am trying to change the code such that when I hover on #btnSaveChanges, it will change with background color blue instead of black. Similar with #btnLogout.

HTML

<button id="btnSaveChanges" className="button-57" onClick={handleSave}>
  <span>Save</span>
  <span>Save</span>
</button>
<button id='btnLogout' className="button-57" onClick={handleLogout}>
  <span>Logout</span>
  <span>Logout</span>
</button>

CSS:

.button-57 {
  position            : relative;
  overflow            : hidden;
  border              : 1px solid #BBBBBB;
  border-radius       : 20px;
  color               : #18181a;
  display             : inline-block;
  font-size           : 15px;
  line-height         : 15px;
  padding             : 18px 18px 17px;
  text-decoration     : none;
  cursor              : pointer;
  background          : #fff;
  user-select         : none;
  -webkit-user-select : none;
  touch-action        : manipulation;
  width               : 45%;
  margin              :10px;
  }
.button-57 span:first-child {
  position   : relative;
  transition : color 600ms cubic-bezier(0.48, 0, 0.12, 1);
  z-index    : 10;
  }
.button-57 span:last-child {
  color       : white;
  display     : block;
  position    : absolute;
  bottom      : 0;
  transition  : all 500ms cubic-bezier(0.48, 0, 0.12, 1);
  z-index     : 100;
  opacity     : 0;
  top         : 50%;
  left        : 50%;
  transform   : translateY(225%) translateX(-50%);
  height      : 14px;
  line-height : 13px;
  }
.button-57:after{
  content          : "";
  position         : absolute;
  bottom           : -50%;
  left             : 0;
  width            : 100%;
  height           : 100%;
  background-color : black;
  transform-origin : bottom center;
  transition       : transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
  transform        : skewY(9.3deg) scaleY(0);
  z-index          : 50;
  }
.button-57:hover:after,
.button-57:active:after {
  transform-origin : bottom center;
  transform        : skewY(9.3deg) scaleY(2);
  }
.button-57:hover span:last-child,
.button-57:active span:last-child {
  transform  : translateX(-50%) translateY(-50%);
  opacity    : 1;
  transition : all 900ms cubic-bezier(0.48, 0, 0.12, 1);
  }

Hence I tried adding these classes, but it didn’t work, instead the animation didn’t trigger.

.button-57#btnSaveChanges::after{
  content          : "";
  position         : absolute;
  bottom           : -50%;
  left             : 0;
  width            : 100%;
  height           : 100%;
  background-color : #2140D9;
  transform-origin : bottom center;
  transition       : transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
  transform        : skewY(9.3deg) scaleY(0);
  z-index          : 50;
  }
.button-57#btnLogout:after{
  content          : "";
  position         : absolute;
  bottom           : -50%;
  left             : 0;
  width            : 100%;
  height           : 100%;
  background-color : #db2020;
  transform-origin : bottom center;
  transition       : transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
  transform        : skewY(9.3deg) scaleY(0);
  z-index          : 50;
  }

The animation didn’t trigger.

What am I doing wrong? Is there any way to implement this.