JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<button title="home" id="home-btn" class="fa fa-home"></button>
<button title="panel" id="panel-btn" class="fa fa-key"></button>

CSS

button {
    position: absolute;
    font-size: x-large;
    border-radius: 25px;
    width: 140px;
    height: 50px;
    margin: 5px;
    color: white;
    border: none;
    cursor: pointer;
    overflow: hidden;
}
#home-btn {
    background: orange;
}
#panel-btn {
    background: yellowgreen;
    right: 0;
}

button::before {
  content: "";
  display: block;
  background: rgba(0, 0, 0, .1);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: all .2s ease;
}

button:hover::before {
  opacity: 1;
}