.buttonSfx {
  padding: 0;
  border: none;
}

.buttonSfx span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.buttonSfx:before,
.buttonSfx:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  transition: all 0.3s ease;
}

.buttonSfx:before {
  height: 0%;
  width: 2px;
  pointer-events: none;
}

.buttonSfx:after {
  width: 0%;
  height: 2px;
  pointer-events: none;
}

.buttonSfx:hover {
  background: transparent;
  box-shadow: none;
}

.buttonSfx:hover:before {
  height: 100%;
}

.buttonSfx:hover:after {
  width: 100%;
}

.blue.buttonSfx span:hover {
  color: #00bfff;
  transition: all 0.3s ease;
}

.green.buttonSfx span:hover {
  color: #00ffc3;
  transition: all 0.3s ease;
}

.buttonSfx span:before,
.buttonSfx span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  transition: all 0.3s ease;
}

.buttonSfx span:before {
  width: 2px;
  height: 0%;
}

.buttonSfx span:after {
  width: 0%;
  height: 2px;
}

.buttonSfx span:hover:before {
  height: 100%;
}

.buttonSfx span:hover:after {
  width: 100%;
}

.blue.buttonSfx span:before,
.blue.buttonSfx span:after,
.blue.buttonSfx:before,
.blue.buttonSfx:after {
  background: #00bfff;
}

.green.buttonSfx span:before,
.green.buttonSfx span:after,
.green.buttonSfx:before,
.green.buttonSfx:after {
  background: #00ffc3;
}