Better UI feedback by adding these styles to global stylesheet for web app

it makes the ui give the user feedback similiar to material design. play with the styles. add these to global.css you can find more global pseudo-classes to apply variations across the board

div[data-focusable]{
    background-position: center;
    transition: background 0.8s;
  }
  div[data-focusable]:hover {
    background: rgba(0,0,0,0.2) radial-gradient(circle, transparent .05%, rgba(0,0,0,0.1) .05%) center/100%;
    border-radius:25px;
  }
  div[data-focusable]:active {
    background-color: rgba(0,0,0,0.1);
    background-size: 100%;
    transition: background 0.3s ease-in-out;
    animation: bounce 0.2s linear;
  }
  
  @keyframes bounce {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }

here is on actual android. before there was no ripple or bounce on anything on web, and users think it does not work. its crazy but understand they are not developers they are programmed themselves. must give a ui feedback, even if slight and subtle. that lets them know to wait for the app to do what they expect it to do.