Para complementar el post sobre cajas de color hoy vamos a crear 6 botones que podrás utilizar como llamadas a la acción (o CTA’s) en tus entradas y páginas:
Si no tienes claro lo que es una CTA te invito a leer este post de Alex que lo explica a la perfección :)
CSS necesario para crear los 6 botones
Añadiremos este CSS a través del personalizador del theme en Apariencia > Personalizar > CSS adicional o directamente al archivo ‘style.css’ de nuestra plantilla o child theme de Genesis:
/* 6 botones molones ------------------------------------------------------------ */ .boton-azul, .boton-gris, .boton-verde, .boton-purpura, .boton-rojo, .boton-amarillo { color: #fff !important; padding: 15px 35px 17px 35px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; font-size: 15px; font-weight: bold; line-height: 1em; text-align: center; clear: both; display: block; margin: 0 auto; width: 200px; } .boton-azul:hover, .boton-gris:hover, .boton-verde:hover, .boton-purpura:hover, .boton-rojo:hover, .boton-amarillo:hover { text-decoration: none; } .boton-azul { background-color: #afcde3; border: 1px solid #afcde3; } .boton-azul:hover { background-color: #83a2be; border: 1px solid #83a2be; } .boton-gris { background-color: #bdbdbd; border: 1px solid #bdbdbd; } .boton-gris:hover { background-color: #919191; border: 1px solid #919191; } .boton-verde { background-color: #b2ce96; border: 1px solid #b2ce96; } .boton-verde:hover { background-color: #86a36e; border: 1px solid #86a36e; } .boton-purpura { background-color: #bebde9; border: 1px solid #bebde9; } .boton-purpura:hover { background-color: #9291c7; border: 1px solid #9291c7; } .boton-rojo { background-color: #e9b3b3; border: 1px solid #e9b3b3; } .boton-rojo:hover { background-color: #c78787; border: 1px solid #c78787; } .boton-amarillo { background-color: #fadf98; border: 1px solid #fadf98; } .boton-amarillo:hover { background-color: #ecb870; border: 1px solid #ecb870; }
Sintaxis HTML para incluir los botones en tu contenido
Lo único que deberás hacer para incluir uno de estos botones a tu contenido es añadir la clase ‘boton-azul’, ‘boton-gris’, ‘boton-verde’, ‘boton-purpura’, ‘boton-rojo’, o ‘boton-amarillo’ a la etiqueta HTML ‘a’ siguiendo este esquema:
<a class="boton-verde" href="#">CTA color azul</a>
¡Ahora ya puedes colocar CTA’s en tu web sin problemas!
Si tienes alguna duda con este tutorial envíanos un mensaje :)