Changing Button Colors

Solved
Highlighted
Tourist
11 0 2

Hey community,

I have a question concerning changing the color of certain buttons. We are using the Turbo Theme by OutOfTheSandbox. There is a section Image with Text Overlay, and I cannot figure out how to change the color of the button for Desktop and mobile. 

For both we want to have the button being:
#ff7803 (Button Color)
#FFFFFF (Text color)

Can someone help how we can change that? 
Thanks in advance!

All the best to everyone!

0 Likes
Highlighted

Hello andygornation,
Please share your site url.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
11 0 2

Hey,

 

our URL is: https://www.gornation.com/ 

The section on the top :)

Best regards and thanks!!!

Andy

0 Likes
Highlighted

Hello andygornation,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->styles.scss.liquid

.featured-link--section .featured-link--half{
background-color:#ff7803!important;
color:#FFFFFF!important;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
11 0 2

Thanks! I meant another section. The top section. The button there is Orange/Black and if you go on mobile it is Black/white. There we need the orange/white button :)

The button with the writing "Get your Equipment" on the header.


Thanks in advance!

Best regards

0 Likes
Highlighted

Hello andygornation,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->styles.scss.liquid

a.action_button.first_button.highlight-true {
    color: white!important;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
11 0 2

Awesome, that works, thanks a lot!!! Is it possible to have the same for the mobile version? (Same Section) Because when changing to mobile version, the button is Black/White, and it would nice to have it orange/white as well. Can you help me with that as well?

Big Thanks in advance!

Best regards,

Andy

0 Likes
Highlighted

This is an accepted solution.

Hello @andygornation 

For mobile changes

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->styles.scss.liquid

@media screen and (max-width: 480px) {
.banner .caption-content .action_button.first_button.highlight-true {
	background-color: #ff7803 !important;
	border-color: #ff7803 !important;
	color: #333 !important;
}
}

Hope this will work for you.
Thanks!

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
11 0 2

That works! Thanks a lot for your help. Really much appreciate that!

 

Best regards,

Andy

0 Likes