Is there any way with css or JavaScript to set an animation border when it is clicked or active in wordpress?

I want to make this effect on a ul lists.I'm using a filter product and i can't put a button inside li elements.

.btn{
  border:none;
  color: #FFFFFF29;
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0.5rem 0;
  font-size:65px;
  transition: .3s;
  transition-delay: 0.5s;
}

.btn::before{
   content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #fff;
  transform: translateX(-105%);
  transition: transform 0.5s ease-in-out;
  transition-delay: 0.5s;


}

.btn:focus::before{
   transform: translateX(0);
}

.btn:focus{
  transition:.3s;
  color:#fff;
  transition-delay: 0.5s;
  outline: none;
  background-color: transparent;

}
.btn:not(hover){
    color: #FFFFFF29 ;
    background-color: #1a1a1a;
}
ul {
     background-color:#1a1a1a;
    list-style-type: none;
}

    <ul>
    <li><button class="btn" >Digital Marketing</button></li>
    <li><button class="btn" >Sviluppo</button></li>
  </ul>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Elementor Class Add into a tag

CodePudding user response：

.btn:not(hover){
    color: var(--e-global-color-secondary) !important;
    background-color: #1a1a1a;
}