¿Le gustaría crear un botón degradado multicolor en Elementor ?
Por defecto, Elementor tiene una función para crear un color degradado para su botón, pero solo está limitado a dos colores. Este artículo le mostrará cómo crear un botón degradado multicolor en Elementor sin la ayuda de un complemento, simplemente usando el CSS personalizado de Elementor.
Agregar un degradado multicolor a su botón puede hacer que su botón se vea atractivo y tenga una sensación natural. Tal vez se pregunte: "¿Es posible crear un botón degradado multicolor en su sitio web? ”. Bueno, todo es posible con Elementor y puedes crear fácilmente un botón degradado multicolor.
Cómo crear un botón de degradado multicolor en Elementor
Antes de comenzar el tutorial, queremos informarle que este tutorial funcionará con CSS personalizado. La función de CSS personalizado solo está disponible en Elementor Pro; así que asegúrese de actualizar a la versión pro.
Ahora ve a tu editor de Elementor. Comenzaremos desde cero, así que cree una sección con una sola columna. A continuación, seleccione el widget de botón en el panel de widgets, luego arrástrelo y suéltelo en el área de edición de Elementor. Una vez que haya agregado el widget de botón, puede editar y diseñar el widget según sus preferencias.
En la configuración del widget, navegue a la pestaña Avanzado -> CSS personalizado. Copie el fragmento de CSS a continuación, luego péguelo en el campo de CSS personalizado.
selector .elementor-button {
background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}
Si está satisfecho con el degradado multicolor que se ha aplicado (como en la imagen de arriba), puede mantenerlo así y guardar su proyecto si lo desea. Pero, si desea personalizarlo, puede hacerlo modificando el fragmento de CSS más específicamente en el bloque de declaración de CSS.
El bloque de declaración CSS comienza con una llave de apertura ( {'' ) y termina con la llave de cierre derecha (''} ).
Para obtener el bloque de declaración, puede crear un degradado usando el outils gradiente en línea css. Haz clic aquí para ver algunos outils de gradiente CSS. Una vez que haya terminado de crear el degradado, copie el CSS y reemplace el bloque de declaración existente con uno nuevo pegando el CSS.
Observación: Usted puede también crear un título degradado en Elementor .
¡Consigue Elementor Pro ahora!
Conclusión
Este artículo muestra con qué facilidad puede crear un botón degradado multicolor en Elementor. Si está utilizando Elementor como creador de páginas para su sitio web WordPress y desea crear un botón impresionante con un degradado multicolor, este artículo podría ser su solución.
Los botones de uno o dos colores pueden parecer simples y aburridos. Pero tenga cuidado de crear degradados multicolores en sus botones. Preste atención a la combinación de tonos y colores que utiliza para que sus botones no se vean raros y aburridos.
Listo ! Eso es todo por este artículo que le muestra cómo crear un botón degradado multicolor en Elementor. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
