How can I alter the color of specific buttons on my webpage?

Store Design
,
1

Hi there,

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

https://taneraskin.com/pages/about

And the button on the image on my landing page white with black font.

Best,

Isa

2

Hi @isabellemaria

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

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

Hope you find my answer helpful!

Best regards,

Victor | PageFly

3

Hi @isabellemaria

This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:

Step 1:

view (12).png
view (12).png1862×673 102 KB

Step 2: Find file base.css or base.scss.liquid and copy this code at the end of the file:

.rich-text__buttons a.button.button--primary {
    background: white !important;
    color: pink !important;
    border-color:pink !important;
}

.banner__buttons a.button.button--secondary{
    background: white !important;
    color: black! important;
}

Hope this helps you.

1 Like
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.

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

I added the following now, but when I hover, there is a black frame around it. How do I get rid of that?

.banner__buttons a.button.button–secondary{
background: white !important;
color: black! important;
}

6

Hi @isabellemaria

You can try adding this code:

.banner__buttons a.button.button--secondary:hover{ border:none !important; }