Cubomagico Q&A - Preguntas y respuestas recientes en Wordpress

Respondido: Boton en menú con efecto

Thu, 29 Sep 2022 11:31:30 +0000

Para poder desplegar este requerimiento hay que:

1. Acceder a los menúes de Wordpress, y desplegar la pestaña superior "Opciones de pantalla" y allí tildar Clases css.

2. Agregar el elemento del menú, y a este agregarle la clase css "cta-menu"

3. Agregar el siguiente código css completo

/* BOTON DONÁ - MENU PPAL*/

.cta-menu a {
 border: 2px solid #e8590d; /*grosor y color del border del boton*/
 padding-top: 10px !important;
 padding-bottom: 10px !important;
 padding-right: 20px !important;
 padding-left: 20px !important;
 border-radius: 25px;
 background: #e8590d;  /*fondo del boton*/
 color: #fff !important; /*letras del boton*/
 animation-name: pulse;
 animation-duration: 3000ms;
 transform-origin:70% 70%;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
 text-align: center;
}

.et-fixed-header #top-menu .cta-menu a { 
 color: #fff !important; 
}

@keyframes pulse {
   0% { transform: scale(1); }
   30% { transform: scale(1); }
   40% { transform: scale(1.08); }
   50% { transform: scale(1); }
   60% { transform: scale(1); }
   70% { transform: scale(1.05); }
   80% { transform: scale(1); }
   100% { transform: scale(1); }
}
 
.cta-menu a:hover {
 border: 2px solid #e8590d; /*grosor y color del border del boton*/
 background: #e8590d; /*fondo del boton*/
 color: #fff !important;  /*letras del boton*/
 opacity: 1 !important;
 animation: none;
}