Support » Theme: Sydney » Different colour for call to action button in same page

  • Hi,

    In my front page I’m having few call to action buttons,
    how can I make each button to have their own colour?

    Thank you.

Viewing 1 replies (of 1 total)
  • Hello there,

    Firstly you need to assign a custom class name to your CTA widget which can be done by editing it. When the widget settings is displaying, open the Attributes options; in the Widget Class field, enter a class name e.g. button-1

    Then apply the following CSS code into Appearance > Customize > Additional CSS:

    
    /* Button 1 */
    
    .button-1 .roll-button {
      border-color: #ba18cd;
      color: #ba18cd;
    }
    
    .button-1 .roll-button:hover {
      border-color: #0d3dc9;
      background-color: #0d3dc9;
      color: #fff;
    }  
    
    /* Button 2 */
    
    .button-2 .roll-button {
      border-color: #6d9e0d;
      color: #6d9e0d;
    }
    
    .button-2 .roll-button:hover {
      border-color: #b2980a;
      background-color: #b2980a;
      color: #fff;
    }  
    

    I hope this reply helps.

    Regards,
    Kharis

Viewing 1 replies (of 1 total)
  • The topic ‘Different colour for call to action button in same page’ is closed to new replies.