Share:

01.05.2017 by Daria Symanko.

Topics: Other, Turbo Documentation

Customize your CTA in 7 Steps

By using Information and Design tabs in HubSpot CTA builder you can easily regulate the appearance of your Calls-To-Action. If you are looking for more advanced features like hover effect, follow the next steps.

 

  1. Go to Content -> Calls-to-Action

    Знімок екрана 2017-03-27 о 10.01.33.png

  2. Create a new CTA or choose from those you have purchased with a template.

    There is a list of button classes in our new Turbo Sodium v2 template:

    • cta-secondary cta-secondary--white-border

      Знімок екрана 2017-03-27 о 10.10.34.png

    • cta-primary

      Знімок екрана 2017-03-27 о 10.24.25.png

    • cta-secondary

      Знімок екрана 2017-03-27 о 10.58.20.png

  3. Choose Design tab and use “Customize CSS” button under

     Notice: To use classes listed above copy the name you want, choose Design tab and put it into "CSS Class" field. Don't forget to change the Style to "Link(No style)". This will avoid overlapping of classic Hubspot design with Clickray classes.

    Знімок екрана 2017-03-27 о 12.01.29.png


  4. Scroll Auto Generated CSS box to locate the styles and ID name with effects.

    It seems like this: a#cta_button_###_###{any style} 

    Notice: You can add an extra action to your Turbo Sodium CTA's. It creates jumping button effect when firstly displayed on the page. To embrace, write the collocation "wow bounce" before the name of each class.

  5. Copy and paste your CTA ID from the Auto Generated CSS box into the Custom one by the right side.

    (All styles editing is providing on Custom CSS, not on Auto Generated CSS directly).


    Знімок екрана 2017-03-27 о 13.52.41.png

  6. Change the effects in the Custom CSS box the way you want.

    Example: To make background color black when hovered over you need to put in the code, which is located below the hover one and change numbers to zero's.


    Знімок екрана 2017-03-27 о 13.48.11.png

  7. Check how it works by hovering over your CTA.

 

If it is good, just click to update.


You’ve done! Also, you can add such hover effects as box-shadows or borders. Just remember to copy and paste  Call-To-Action ID with hover selector during customizing the CSS. 

clickray-CONTACT3.png