How can I modify the CSS for a button's margin, border-radius, and background color?

Technical Q&A
1

Hi!
How do i address this button?

RubberDuck44_0-1642534196723.png
RubberDuck44_0-1642534196723.png1914×382 49.2 KB

I would like to add some margin-top, border-radius and change the backround-color.

2

The image that you attached isn’t clear enough to see what the text is. If you copy and paste the code using the HTML formatting option that would probably help you get a response faster :slightly_smiling_face:

3

Like this?

4

@RubberDuck44 - can you share your page link whereyou have this button? issue is if it does not have any unique id or class then all buttons will be affected.

5

https://fastshades.no/collections/raske-briller/products/party-shades-gronn

RubberDuck44_0-1642582368652.png
RubberDuck44_0-1642582368652.png935×209 8.84 KB

6

@RubberDuck44 - please add this css and check, background and fill should change the colors, right now looks like screenshot

[name="vipps-hurtigkasse-add-to-cart"] {
    background-color: #000000;    border-radius: 20px;    margin-top: 20px;
}

[name="vipps-hurtigkasse-add-to-cart"] rect {
    fill: #000;
}

suyash1_0-1642583913969.png
suyash1_0-1642583913969.png1366×768 161 KB

7

@suyash1

Then it looks like this :sweat_smile:

RubberDuck44_0-1642584107688.png
RubberDuck44_0-1642584107688.png843×159 4.5 KB

8

@RubberDuck44 - please put !important after each property and check

9

@suyash1

That made the difference! Thank you :clap: :+1: