Costumize Call To Action buttons

Hi!

I am using Perth theme: www.zsombordeak.com

I would like to customize call to action buttons. I want the letters in the boxes to be bigger and color the boxes (now they are transparent till you hover over them). I tried so many CSS codes, but nothing seems to work. It might be because I have too many additional CSS on my list. Below are the ones which I currently have. Which one should I delete and what should I use iinstead?

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

.footer-column .widget,
.footer-column .widget a {
color: #291F47;
}

Same Size Post Images

.post-body img {
max-width: 640px !important;
height: auto !important;
}
.pinit-wrapper img {
max-width: 125px !important;
height: auto !important;
}

.blog article .entry-thumb img {
height: 190px;
}

.action-button .button {
font-size: 20px;
padding: 15px 30px;
font-weight: 700;
color: #ffffff;
border: 1px solid #315B9D;
-webkit-appearance: button;
text-transform: uppercase;
background-color: #FF0043;
}

.employee-area .employee-social {
border: none;
}

a.roll-button.border {
color: #ffffff;
background-color: #ffffff;
border: 1px solid #000000;
}

a.roll-button.border:hover {
color: #000000;
background-color: #ffffff;
border: 1px solid #ffffff;
}

*I know some of them are not for the Call to action buttons, just wanted to show everything I have.

Thanks in advance!

Hello there,

Please try to replace this line:


Same Size Post Images

with:


/* Same Size Post Images */ 

If you comment your CSS code, you must use /* */ wrapper. Otherwise, it will be read as an error on web browser and the following lines won’t be executed.

Regards,
Kharis

Hi Kharis,

Thanks for the reply!

I did change the line as you suggested. Nothing happened. The Call to Action buttons are still the same as they were. Any other suggestions?

Thanks!

Hello there,

This code won’t work in Perth.


a.roll-button.border {
  color: #ffffff;
  background-color: #ffffff;
  border: 1px solid #000000;
}

a.roll-button.border:hover {
  color: #000000;
  background-color: #ffffff;
  border: 1px solid #ffffff;
}

You should use this one instead:


.header-button.left-button {
  font-size: 18px;
  color: #ff0000;
  background-color: #fff000;
  border-color: #fff000;
}

.header-button.left-button:hover {
  background-color: #ff0000;
  border-color: #ff0000;
  color: #fff000;
}  

Regards,
Kharis

Thanks! Now I can edit the headr buttons.

How can I edit the body call to action buttons? Whats the code for that?

Thanks!

Guess I should change the following code to something else:

.action-button .button {
font-size: 20px;
padding: 15px 30px;
font-weight: 700;
color: #ffffff;
border: 1px solid #315B9D;
-webkit-appearance: button;
text-transform: uppercase;
background-color: #FF0043;
}

Yes, you’re right.

Hi Kharis,

I do not know how to change the following code. So my question is still the same:
How can I customise Call to Action buttons in the body of my page? For example under the blog section, or under the employees?

Thanks in advance!

Hello there,

You can use this CSS selector for the button of blog section:


.widget_perth_latest_news .more-button {
  /* CSS declarations go here */
}

For employees, you can use this one:


.widget_perth_employees .more-button {
  /* CSS declarations go here */
}

I hope this helps.

Regards,
Kharis

Hi Kahris,

What do you mean by CSS declaration? What should I put there?

Sorry for the probably silly question!

Hello there,

Visit this link, please.

Regards,
Kharis

Thanks a lot Kharis!

Now it works for both.

How can I costumize the CTA button for service type a and service type b? Please send me the shortcode for those.

Thank you very much!

Hello there,

You can use these selectors:


.widget_perth_services_type_a .more-button {
  /* CSS declarations go here */  
}

.widget_perth_services_type_b .more-button {
  /* CSS declarations go here */  
}

Regards,
Kharis

Thanks a lot! Appreaciate your work!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis