How do I change button colour for hero on motion theme

Store Design
1
Show More

Hi I want to change the button color for my image hero on Motion OS 2.0 theme. My store is canvaspupportraits.com

puppuppup_0-1644044349630.png
puppuppup_0-1644044349630.png2303×815 189 KB

1 Like
2

Hello @puppuppup ,

You can add this code in the theme->edit code->asset->theme.liquid.scss file

Paste this in the bottom.

I have currently added red color in the background and white color font. you can add your.

.hero .btn.btn--inverse {
	background-color: red !important;
	color: #fff;
}
3

puppuppup_0-1644044966964.png
puppuppup_0-1644044966964.png367×142 43.1 KB

How do I turn this text white when I hover my mouse?

4

@puppuppup ,

Please add this CSS to your theme

.animation-contents a.btn.btn--inverse:hover{
    color: #fff !important;
}

Thanks!

5 
.hero .btn.btn--inverse {
    background-color: red !important;
    color: #fff;
}

@puppuppup
Add this code in the bottom of the theme.css
And change the color according to you need red,blue ,black etc

6

puppuppup_0-1644046018115.png
puppuppup_0-1644046018115.png395×191 39.7 KB

Thank you both for the help, but now the arrow is black. How do I change that? and also how do I make the border around the button blue #1F84F8 as well?

7

@puppuppup

a.btn.btn--inverse {
    border: none !important;
}
8

puppuppup_0-1644046276787.png
puppuppup_0-1644046276787.png495×200 51.3 KB

Great work everyone! We’re almost there. How do I change the arrow to white?

9

@puppuppup
Add this code

@media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (-webkit-min-device-pixel-ratio: 2.08333333333333), not all, only screen and (min-resolution: 1.25dppx), only screen and (min-resolution: 200dpi){
[data-animate_buttons=true] .btn:not(.btn--no-animate):not(.btn--tertiary):not(.btn--static).add-to-cart--secondary, [data-animate_buttons=true] .btn:not(.btn--no-animate):not(.btn--tertiary):not(.btn--static).btn--inverse {
    background-image: url(//cdn.shopify.com/s/files/1/0621/0240/5339/t/16/assets/button-arrow-black-2x.png);
    background: none !important;
}
}
10

@puppuppup ,

.animation-contents a.btn.btn--inverse {
    border: #1F84F8;
}
.animation-contents a.btn.btn--inverse:hover {
    border: #1F84F8;
}
11

puppuppup_0-1644046650294.png
puppuppup_0-1644046650294.png414×188 47 KB

Now the arrow and the background is gone

1 Like
12

@puppuppup

remove the other one code.

13 
[data-animate_buttons=true] .btn:not(.btn--no-animate):not(.btn--tertiary):not(.btn--static).add-to-cart--secondary, [data-animate_buttons=true] .btn:not(.btn--no-animate):not(.btn--tertiary):not(.btn--static).btn--inverse {
border:none !important;
}

@puppuppup
Add this code to remove arrow.
use this.

14

puppuppup_1-1644046982619.png
puppuppup_1-1644046982619.png420×151 31.2 KB

puppuppup_2-1644047002811.png
puppuppup_2-1644047002811.png854×388 38.6 KB

15 
[data-animate_buttons=true] .btn:not(.btn--no-animate):not(.btn--tertiary):not(.btn--static) {
    background-image: url(//cdn.shopify.com/s/files/1/0621/0240/5339/t/16/assets/button-arrow-2x.png) !important;
}

@puppuppup
Add this code to make the arrow white.

16

puppuppup_0-1644047193123.png
puppuppup_0-1644047193123.png405×202 39.4 KB

It works! THank you!

1 Like
17

@puppuppup ,

[data-animate_buttons=true] .btn:not(.btn--no-animate):not(.btn--tertiary):not(.btn--static).add-to-cart--secondary, [data-animate_buttons=true] .btn:not(.btn--no-animate):not(.btn--tertiary):not(.btn--static).btn--inverse {
    background-image: url(https://cdn.shopify.com/s/files/1/0621/0240/5339/t/16/assets/button-arrow.png) !important;
}