How can I modify the color of a specific button on my webpage?

Store Design
,
1

Hi there,

How can I change the color of only this specific buttons on my page? I want the first button to be white with pink font and border:

https://taneraskin.com/pages/about

Best,

Isa

2

Hello @isabellemaria

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.section-template--17904033038604__9da21290-fc39-4004-8da9-63fdd26753a7-padding .rich-text__buttons a.button.button--primary {
    background: #fff !important;
    color: #c43b78 !important;
    border: 1.3px solid #c43b78 !important;
}
3

This doesn’t work since I already added the following code to change the color of all buttons to black:

.rich-text__buttons a.button.button–primary {
background: #202020;
color: #ffffff;
border: 1.3px solid #202020!important;
}

And your code does not only change this specific button, it changes all buttons on the whole website. Do you have an other idea?

4

Hello @isabellemaria

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.section-template--17904033038604__9da21290-fc39-4004-8da9-63fdd26753a7-padding .rich-text__buttons a.button.button--primary {
    background: #fff !important;
    color: #c43b78 !important;
    border: 1.3px solid #c43b78 !important;
}
5

It works, but has a thick black border around it when you hover over it. Can you fix this? :slightly_smiling_face:

6

Hello @isabellemaria

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.section-template--17904033038604__9da21290-fc39-4004-8da9-63fdd26753a7-padding .rich-text__buttons a.button.button--primary:after {
    box-shadow: none;
}