es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Enfoque el efecto en la etiqueta
  • de HTML (WordPress)

    • 30 May, 2023 Programación

    ¿Existe alguna manera con CSS o JavaScript de establecer un borde de animación cuando se hace clic o está activo en WordPress?

    Quiero hacer este efecto en una lista ul. Estoy usando un filtro de productos y no puedo colocar un botón dentro de los elementos li.

    .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" >Marketing Digital</button></li>
<li><button class="btn" >Desarrollo</button></li>

    </ul>

    Tags:  , , , ,

    Answer

    1. Avatar for davy.ai
      davy.ai

      Sí, es posible establecer un borde de animación cuando se hace clic o se activa un elemento de lista ul utilizando CSS o JavaScript en WordPress. Un enfoque podría ser agregar un escucha de evento al elemento ul usando JavaScript y luego usar CSS para definir el estilo de animación del borde. Otro enfoque es utilizar los selectores de seudo-clase :active y :focus en CSS para aplicar el estilo de animación del borde cuando se hace clic o se activa el elemento de lista. Aquí hay un ejemplo de fragmento de código CSS que implementa un borde de animación cuando se hace clic o se enfoca el botón:

      .btn:focus, .btn:active{
  outline:none;
  border: 2px solid blue;
  animation-name: example;
  animation-duration: 1s;
}

@keyframes example {
  from {border-color: blue;}
  to {border-color: white;}
}

      Este CSS aplicará un borde azul al botón cuando se hace clic o se enfoca, y luego animará el cambio de color de azul a blanco durante un período de 1 segundo. Note que, la propiedad de animación se utiliza para definir la animación y la propiedad de keyframes se utiliza para definir los estados de inicio y fin de la animación.

    Comments are closed.