un blog
sobre Jimdo®
Dentro del diseño web, los botones se utilizan como recurso para focalizar la atención del visitante y orientarlo en la navegación por el sitio según interés. Son elementos de los llamados "call-to-action" (llamada a la acción) que debes cuidar con mimo en el diseño de tu website.
Cada plantilla de Jimdo tiene predefinidos unos estilos para cada una de las 3 opciones disponibles dentro del "módulo botones" que, además, puedes redefinir de manera particular usando la opción de estilos individuales (rodillo de estilo) con el objetivo de que encajen mejor con la identidad corporativa de tu proyecto... Aún así, soy partidario de ir un paso más allá en la edición de dichos estilos, para hacer de este tipo de microinteracciones algo más actual y destacado.
Es por eso que te traigo una serie de packs con estilos para los botones de tu web con Jimdo, los cuales solo tienes que añadir a la sección HEAD (ruta: menú > Ajustes > Editar head) y que, además, puedes personalizar a tu gusto en cuanto a colores según se indica en cada caso, o, si lo prefieres y te encaja, copiar y pegar el código tal cual se presenta.
Utiliza esta información bajo tu propia responsabilidad. Los recursos a continuación pueden requerir de conocimientos de programación web html/css/js. Aunque procuro testear el código en sitios web propios creados con Jimdo a tal efecto, no me hago responsable de posibles bugs, fallos o incompatibilidades que pudieran surgir por su uso. Actualizaciones de Jimdo y/o de las dependencias de terceros podrían provocar mal funcionamientos en el widget/plugin en cuestión. El proceso es reversible eliminando el código añadido.
No compatible con la edición de estilos de Jimdo, excepto la selección de la fuente (tipo de letra), que es común al texto de la plantilla. Es posible que debas reordenar los espacios sobre y bajo los botones. Precaución al insertar los botones en columnas o barra lateral, pues en espacios muy estrechos pueden aparecer fallos estéticos.
Nota: Aunque el código a continuación está testado en 4 o 5 plantillas de Jimdo, es posible que no trabaje correctamente en alguna otras debido a diferencias en la nominación de las clases (diferentes nombres para las clases de los <div>), sobre todo podría ocurrir en las plantillas más antiguas. Si detectas que en tu plantilla en concreto no funcionan los estilos déjame un comentario para actualizar el código añadiendo la clase que falte (en su caso).
PACK DE botones Nº1
Botones estilo "flat" con extremos redondeados y efecto "botón pulsado" al hacer clic. Demo:
Presiona el botón con el puntero del ratón para apreciar el efecto al "activar" cada botón. Dicho efecto no se aprecia en las versiones móviles, claro.
El código que necesitas insertar en el HEAD según los ejemplos de este pack de botones es:
/* BOTONES 1: ESTILO AZUL */
.jtpl-content a.j-calltoaction-link, .jtpl-section__inner a.j-calltoaction-link, .jtpl-section-aside a.j-calltoaction-link, .jtpl-sidebar a.j-calltoaction-link {min-width: 180px; min-height: 44px; border: none !important; text-transform: uppercase; letter-spacing: 0.5px; border: 3px solid transparent !important; color: #FFF !important; -webkit-box-shadow: 0 -3px 0 0 #214677; box-shadow: 3px 3px 0 0 #214677; cursor: pointer; -webkit-transition: all .25s linear; -moz-transition: all .25s linear; -ms-transition: all .25s linear; -o-transition: all .25s linear; transition: all .25s linear;}
.jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3 {line-height: 44px !important; font-size: 13px !important; padding: 0; margin: 0; border-radius: 44px;}
/* Botón 1 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1 {background-color: #4183D7;}
/* Botón 2 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2 {background-color: #225EAB;}
/* Botón 3 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3 {background-color: transparent; border: 3px solid #214677 !important; color: #214677 !important;}
/* Hover 1 2 */ .jtpl-content a.j-calltoaction-link:hover, .jtpl-section__inner a.j-calltoaction-link:hover, .jtpl-section-aside a.j-calltoaction-link:hover, .jtpl-sidebar a.j-calltoaction-link:hover {background-color: #1451A1 !important; text-decoration: none;}
/* Hover 3 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3:hover {background-color: #1451A1 !important; border: 3px solid #1451A1 !important; color: #FFF !important; text-decoration: none !important;}
/* Active */ .jtpl-content a.j-calltoaction-link:active, .jtpl-section__inner a.j-calltoaction-link:active, .jtpl-section-aside a.j-calltoaction-link:active, .jtpl-sidebar a.j-calltoaction-link:active {box-shadow: none; margin: 3px -3px -3px 3px;}
Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.
/* BOTONES 1: ESTILO ROJO */
.jtpl-content a.j-calltoaction-link, .jtpl-section__inner a.j-calltoaction-link, .jtpl-section-aside a.j-calltoaction-link, .jtpl-sidebar a.j-calltoaction-link {min-width: 180px; min-height: 44px; border: none !important; text-transform: uppercase; letter-spacing: 0.5px; border: 3px solid transparent !important; color: #FFF !important; -webkit-box-shadow: 0 -3px 0 0 #A1281B; box-shadow: 3px 3px 0 0 #A1281B; cursor: pointer; -webkit-transition: all .25s linear; -moz-transition: all .25s linear; -ms-transition: all .25s linear; -o-transition: all .25s linear; transition: all .25s linear;}
.jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3 {line-height: 44px !important; font-size: 13px !important; padding: 0; margin: 0; border-radius: 44px;}
/* Botón 1 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1 {background-color: #E64b39;}
/* Botón 2 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2 {background-color: #BF3729;}
/* Botón 3 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3 {background-color: transparent; border: 3px solid #A1281B !important; color: #A1281B !important;}
/* Hover 1 2 */ .jtpl-content a.j-calltoaction-link:hover, .jtpl-section__inner a.j-calltoaction-link:hover, .jtpl-section-aside a.j-calltoaction-link:hover, .jtpl-sidebar a.j-calltoaction-link:hover {background-color: #AB2C1F !important; text-decoration: none;}
/* Hover 3 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3:hover {background-color: #AB2C1F !important; border: 3px solid #AB2C1F !important; color: #FFF !important; text-decoration: none !important;}
/* Active */ .jtpl-content a.j-calltoaction-link:active, .jtpl-section__inner a.j-calltoaction-link:active, .jtpl-section-aside a.j-calltoaction-link:active, .jtpl-sidebar a.j-calltoaction-link:active {box-shadow: none; margin: 3px -3px -3px 3px;}
Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.
/* BOTONES 1:ESTILO VERDE */
.jtpl-content a.j-calltoaction-link, .jtpl-section__inner a.j-calltoaction-link, .jtpl-section-aside a.j-calltoaction-link, .jtpl-sidebar a.j-calltoaction-link {min-width: 180px; min-height: 44px; border: none !important; text-transform: uppercase; letter-spacing: 0.5px; border: 3px solid transparent !important; color: #FFF !important; -webkit-box-shadow: 0 -3px 0 0 #04804E; box-shadow: 3px 3px 0 0 #04804E; cursor: pointer; -webkit-transition: all .25s linear; -moz-transition: all .25s linear; -ms-transition: all .25s linear; -o-transition: all .25s linear; transition: all .25s linear;}
.jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3 {line-height: 44px !important; font-size: 13px !important; padding: 0; margin: 0; border-radius: 44px;}
/* Botón 1 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1 {background-color: #70CE63;}
/* Botón 2 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2 {background-color: #00B16A;}
/* Botón 3 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3 {background-color: transparent; border: 3px solid #04804E !important; color: #04804E !important;}
/* Hover 1 2 */ .jtpl-content a.j-calltoaction-link:hover, .jtpl-section__inner a.j-calltoaction-link:hover, .jtpl-section-aside a.j-calltoaction-link:hover, .jtpl-sidebar a.j-calltoaction-link:hover {background-color: #039359 !important; text-decoration: none;}
/* Hover 3 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3:hover {background-color: #039359 !important; border: 3px solid #039359 !important; color: #FFF !important; text-decoration: none !important;}
/* Active */ .jtpl-content a.j-calltoaction-link:active, .jtpl-section__inner a.j-calltoaction-link:active, .jtpl-section-aside a.j-calltoaction-link:active, .jtpl-sidebar a.j-calltoaction-link:active {box-shadow: none; margin: 3px -3px -3px 3px;}
Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.
Para simplificar, los elementos están "coloreados" usando una nomenclatura hexadecimal, que verás formada por el símbolo almohadilla (#) seguido de 6 caracteres alfanuméricos (por ejemplo: #FF0000 corresponde al color rojo). Puedes modificar el color sustituyendo el código hexadecimal indicado por cualquier otro. Este tipo de utilidades pueden ayudarte en cuanto a la selección del color adecuado.
La clase para cada botón concreto, donde puedes actuar sobre los colores, corresponde a:
- j-calltoaction-link-style-1 para el botón estilo 1.
- j-calltoaction-link-style-2 para el botón estilo 2.
- j-calltoaction-link-style-3 para el botón estilo 3.
Donde:
- Para el color de fondo se usa el atributo: background-color, por ejemplo: background-color: #70CE63
- Para el color de la sombra inferior (efecto 3D): box-shadow, por ejemplo: box-shadow: 0 -3px 0 0 #04804E
Y en el caso del botón estilo 3 (j-calltoaction-link-style-3) puedes actuar sobre el color de:
- La línea de borde: border, por ejemplo: border: 3px solid #048046
- El color del texto: color, por ejemplo: color: #048046
PACK DE botones Nº2
Botones grandes estilo "flat" con efecto 'hover' redimensionado. Demo:
En este caso es importante que tengas en cuenta que la alineación del botón debe ser "centrada" (más info aquí; opciones de posición: centrada). El código de estilos a insertar en el HEAD es:
/* BOTONES 2: ESTILO BLANCO-NEGRO */
.jtpl-content a.j-calltoaction-link, .jtpl-section__inner a.j-calltoaction-link, .jtpl-section-aside a.j-calltoaction-link, .jtpl-sidebar a.j-calltoaction-link {margin: 6px 0 0 0 !important; padding: 20px 60px !important; color: #fff !important; border-radius: 5px !important; font-size: 12px !important; letter-spacing: 1.4px; line-height: 1 !important; text-transform: uppercase !important; font-weight: bold; border: 3px solid transparent !important; cursor: pointer; -webkit-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55) !important; transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55) !important;}
.jtpl-content a.j-calltoaction-link:hover, .jtpl-section__inner a.j-calltoaction-link:hover, .jtpl-section-aside a.j-calltoaction-link:hover, .jtpl-sidebar a.j-calltoaction-link:hover {margin: 12px 0 6px 0 !important; padding: 14px 70px !important;}
/* Botón 1 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1:hover, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1:hover, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1:hover, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1:hover {background-color: #222 !important;}
/* Botón 2 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2:hover, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2:hover, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2:hover, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2:hover {background-color: #848484 !important;}
/* Botón 3 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3:hover {background-color: transparent !important; border: 3px solid #222 !important; color: #222 !important;}
Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.
/* BOTONES 2: ESTILO JIMDO */
.jtpl-content a.j-calltoaction-link, .jtpl-section__inner a.j-calltoaction-link, .jtpl-section-aside a.j-calltoaction-link, .jtpl-sidebar a.j-calltoaction-link {margin: 6px 0 0 0 !important; padding: 20px 60px !important; color: #fff !important; border-radius: 5px !important; font-size: 12px !important; letter-spacing: 1.4px; line-height: 1 !important; text-transform: uppercase !important; font-weight: bold; border: 3px solid transparent !important; cursor: pointer; -webkit-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55) !important; transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55) !important;}
.jtpl-content a.j-calltoaction-link:hover, .jtpl-section__inner a.j-calltoaction-link:hover, .jtpl-section-aside a.j-calltoaction-link:hover, .jtpl-sidebar a.j-calltoaction-link:hover {margin: 12px 0 6px 0 !important; padding: 14px 70px !important;}
/* Botón 1 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1:hover, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1:hover, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1:hover, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1:hover {background-color: #6db553 !important;}
/* Botón 2 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2:hover, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2:hover, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2:hover, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2:hover {background-color: #1BA9E1 !important;}
/* Botón 3 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3:hover, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3:hover {background-color: transparent !important; border: 3px solid #cacedb !important; color: #696c76 !important;}
Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.
Al igual que en el caso anterior (Pack Nº1), queda a tu disposición modificar los colores sustituyendo el código hexadecimal según la clase de cada uno de los tres estilos de botón en Jimdo y según los atributos de color comentados en el punto anterior (en este caso no aparece el atributo "sombra").
PACK DE botones Nº3
Botones con sombra y efecto 'hover' con desplazamiento del detalle. Demo:
Inspiración: https://codepen.io/macky/pen/NGMVRW
El código que necesitas insertar igualmente en el HEAD según los ejemplos de este pack de botones es:
/* BOTONES 3: Mismo color marco, sombra y texto */
.jtpl-content, .jtpl-section__inner, .jtpl-section-aside, .jtpl-sidebar, .jtpl-sidebar__content {z-index: 1; position: relative;}
.jtpl-content a.j-calltoaction-link, .jtpl-section__inner a.j-calltoaction-link, .jtpl-section-aside a.j-calltoaction-link, .jtpl-sidebar a.j-calltoaction-link {margin: 6px 0 0 0 !important; padding: 15px 40px 15px 20px; border-radius: 0px !important; font-size: 12px !important; letter-spacing: 0.2em; line-height: 1 !important; text-transform: uppercase !important; cursor: pointer; min-width: 200px; background-color: #FFF !important; font-style: italic !important; position: relative;}
.jtpl-content a.j-calltoaction-link::after, .jtpl-section__inner a.j-calltoaction-link::after, .jtpl-section-aside a.j-calltoaction-link::after, .jtpl-sidebar a.j-calltoaction-link::after {display: inline-block !important; content: "→"; position: absolute; margin-left: 5px; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; font-size: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.jtpl-content a.j-calltoaction-link:hover::after, .jtpl-section__inner a.j-calltoaction-link:hover::after, .jtpl-section-aside a.j-calltoaction-link:hover::after, .jtpl-sidebar a.j-calltoaction-link:hover::after {margin-left: 12px;}
.jtpl-content a.j-calltoaction-link:active::after, .jtpl-section__inner a.j-calltoaction-link:active::after, .jtpl-section-aside a.j-calltoaction-link:active::after, .jtpl-sidebar a.j-calltoaction-link:active::after {margin-left: 26px;}
.jtpl-content a.j-calltoaction-link::before, .jtpl-section__inner a.j-calltoaction-link::before, .jtpl-section-aside a.j-calltoaction-link::before, .jtpl-sidebar a.j-calltoaction-link::before {content: ""; display: block; z-index: -1; position: absolute; top: 0.5em; right: -0.6em; left: 0.4em; bottom: -0.6em; -webkit-transform: rotate(1.5deg); transform: rotate(1.5deg);}
/* Botón 1 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1 {border: 2px solid #c21622 !important; color: #c21622 !important;}
/* Botón 1: Sombra */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1::before, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1::before, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1::before, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1::before {background-color: #c21622;}
/* Botón 2 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2 {border: 2px solid #c21622 !important; color: #c21622 !important;}
/* Botón 2: Sombra */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2::before, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2::before, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2::before, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2::before {background-color: #663399;}
/* Botón 3 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3 {border: 2px solid #c21622 !important; color: #c21622 !important;}
/* Botón 3: Sombra */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3::before, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3::before, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3::before, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3::before {background-color: #F89406;}
Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.
/* BOTONES 3: Fondo sólido */
.jtpl-content, .jtpl-section__inner, .jtpl-section-aside, .jtpl-sidebar, .jtpl-sidebar__content {z-index: 1; position: relative;}
.jtpl-content a.j-calltoaction-link, .jtpl-section__inner a.j-calltoaction-link, .jtpl-section-aside a.j-calltoaction-link, .jtpl-sidebar a.j-calltoaction-link {margin: 6px 0 0 0 !important; padding: 15px 40px 15px 20px; border-radius: 0px !important; font-size: 12px !important; letter-spacing: 0.2em; line-height: 1 !important; text-transform: uppercase !important; cursor: pointer; min-width: 200px; background-color: #f2f2f2 !important; font-style: italic; position: relative; border: 2px solid transparent !important; color: #000 !important;}
.jtpl-content a.j-calltoaction-link::after, .jtpl-section__inner a.j-calltoaction-link::after, .jtpl-section-aside a.j-calltoaction-link::after, .jtpl-sidebar a.j-calltoaction-link::after {display: inline-block !important; content: "→"; position: absolute; margin-left: 5px; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; font-size: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.jtpl-content a.j-calltoaction-link:hover::after, .jtpl-section__inner a.j-calltoaction-link:hover::after, .jtpl-section-aside a.j-calltoaction-link:hover::after, .jtpl-sidebar a.j-calltoaction-link:hover::after {margin-left: 12px;}
.jtpl-content a.j-calltoaction-link:active::after, .jtpl-section__inner a.j-calltoaction-link:active::after, .jtpl-section-aside a.j-calltoaction-link:active::after, .jtpl-sidebar a.j-calltoaction-link:active::after {margin-left: 26px;}
.jtpl-content a.j-calltoaction-link::before, .jtpl-section__inner a.j-calltoaction-link::before, .jtpl-section-aside a.j-calltoaction-link::before, .jtpl-sidebar a.j-calltoaction-link::before {content: ""; display: block; z-index: -1; position: absolute; top: 0.5em; right: -0.6em; left: 0.4em; bottom: -0.6em; -webkit-transform: rotate(1.5deg); transform: rotate(1.5deg);}
/* Botón 1: Sombra */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1::before, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1::before, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1::before, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1::before {background-color: #c21622;}
/* Botón 2: Sombra */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2::before, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2::before, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2::before, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2::before {background-color: #663399;}
/* Botón 3: Sombra */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3::before, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3::before, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3::before, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3::before {background-color: #F89406;}
Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.
/* BOTONES 3: Sombra gris */
.jtpl-content, .jtpl-section__inner, .jtpl-section-aside, .jtpl-sidebar, .jtpl-sidebar__content {z-index: 1; position: relative;}
.jtpl-content a.j-calltoaction-link, .jtpl-section__inner a.j-calltoaction-link, .jtpl-section-aside a.j-calltoaction-link, .jtpl-sidebar a.j-calltoaction-link {margin: 6px 0 0 0 !important; padding: 15px 40px 15px 20px; border-radius: 0px !important; font-size: 12px !important; letter-spacing: 0.2em; line-height: 1 !important; text-transform: uppercase !important; cursor: pointer; min-width: 200px; background-color: #FFF !important; font-style: italic; position: relative;}
.jtpl-content a.j-calltoaction-link::after, .jtpl-section__inner a.j-calltoaction-link::after, .jtpl-section-aside a.j-calltoaction-link::after, .jtpl-sidebar a.j-calltoaction-link::after {display: inline-block !important; content: "→"; position: absolute; margin-left: 5px; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; font-size: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.jtpl-content a.j-calltoaction-link:hover::after, .jtpl-section__inner a.j-calltoaction-link:hover::after, .jtpl-section-aside a.j-calltoaction-link:hover::after, .jtpl-sidebar a.j-calltoaction-link:hover::after {margin-left: 12px;}
.jtpl-content a.j-calltoaction-link:active::after, .jtpl-section__inner a.j-calltoaction-link:active::after, .jtpl-section-aside a.j-calltoaction-link:active::after, .jtpl-sidebar a.j-calltoaction-link:active::after {margin-left: 26px;}
/* Sombra */ .jtpl-content a.j-calltoaction-link::before, .jtpl-section__inner a.j-calltoaction-link::before, .jtpl-section-aside a.j-calltoaction-link::before, .jtpl-sidebar a.j-calltoaction-link::before {content: ""; display: block; z-index: -1; position: absolute; top: 0.5em; right: -0.6em; left: 0.4em; bottom: -0.6em; -webkit-transform: rotate(1.5deg); transform: rotate(1.5deg); background-color: #DADADA;}
/* Botón 1 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-1, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-1 {border: 2px solid #c21622 !important; color: #c21622 !important;}
/* Botón 2 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-2, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-2 {border: 2px solid #663399 !important; color: #663399 !important;}
/* Botón 3 */ .jtpl-content a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section__inner a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-section-aside a.j-calltoaction-link.j-calltoaction-link-style-3, .jtpl-sidebar a.j-calltoaction-link.j-calltoaction-link-style-3 {border: 2px solid #F89406 !important; color: #F89406 !important;}
Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.
De la misma manera que en los casos anteriores, siempre puedes personalizar los colores según el código hexadecimal comentado de cada atributo. Eso sí, en el caso de este Pack Nº3, para modificar
el color de la sombra debes actuar sobre la línea concreta que comienza por el comentario "sombra" y buscar el atributo background-color, por ejemplo:
background-color: #DADADA (sombra gris).
Gracias a la posibilidad que nos ofrece Jimdo de actuar sobre los estilos (CSS), bien desde el HEAD en el caso de una plantilla predefinida o bien en el espacio destinado al código de estilo de las plantillas personalizadas, puedes crear botones muy útiles y visualmente llamativos para tu sitio.
Si te encaja cualquiera de estos packs para incorporar a vuestro proyecto web con Jimdo ya sabes, simplemente debes añadir el código indicado (copiar-pegar) en el HEAD y, opcionalmente, modificar el color de algunos atributos para ajustarlo aún más a tu imagen corporativa.
Espero que te sean de utilidad. Continuará...
Diseñador y desarrollador de proyectos web
Jimdo Expert
xiboficemu.jimdofree.com Blog Feed
Vídeos responsive en Jimdo: Módulo dedicado vs Iframe (lun, 31 jul 2017)>> Leer más
Algunas ideas para tus efectos hover en imágenes (I) (Tue, 30 May 2017)
>> Leer más
Primeras impresiones sobre el nuevo blog de Jimdo (Tue, 02 May 2017)
>> Leer más
un blog
sobre Jimdo®
Escribir comentario
json formatter (Friday, 19 May 2017 08:12)
Dentro del diseño web, los botones se utilizan como recurso para focalizar la atención del visitante y orientarlo en la navegación por el sitio según interés.
Mauricio (Saturday, 09 November 2019 20:54)
Bravo, bravo gran aporte