Changing Button in Dawn Theme - Creating Transparency

Store Design
1

My current buttons are white background with black type. I want the button background to be more transparent so one sees the image beneath vs a big white box. I have played with opacity and the Theme colors, but I am not finding a way to make the white more transparent/see-through. Your help would be appreciated!

buttons.jpg
buttons.jpg1170Ă—2532 227 KB

2

You can check through your theme editor and go to theme settings where you will see color…

Check through the button color to make it transparent… If you need help kindly let me know

3

Hi @ALJ ,

  1. Go to your Admin store > Online store > Themes > Click Actions > Edit code

  2. Open the base.css file under your Asset folder. Then paste the code below

You can change the opacity from 0 to 1.

.button.button--primary {
opacity: 0.5;
}

If you want to include the hover effect to have the opacity back to 1, just use the code below.

.button.button--primary {
    opacity: 0.5;
    transition: opacity .5s ease;
  }

  .button.button--primary:hover {
    opacity: 1;
  }
4

I may be blind but I see nothing that refers to the word transparency for Accent 1 (used for solid button background). Where is that?

5

Excellent, that helped a lot!
I would like to remove that black pin line border around the button as well. Can you advise?

6

You can go to the theme editor.

  1. Go to Admin store > Online store > Customize

  2. Open the theme setting located at the left bottom corner. Then click buttons, to open the button customizer. See image below

Screenshot 2022-05-16 110535.jpg
Screenshot 2022-05-16 110535.jpg3760Ă—1877 367 KB

  1. Change the border thickness to zero and you can also use opacity to zero. See image

Screenshot 2022-05-16 110636.jpg
Screenshot 2022-05-16 110636.jpg3762Ă—1822 363 KB

7

These settings were already in place as described below and I’m still getting that pin line border.

8

Thanks but I had those exact settings before, but still see the pin line border.

9

Try to add the code below.

.button.button--primary {
border: none !important;
outline: none !important;
box-shadow: none !important;
}

It might be best to see you website url as well, if this code does not work

10

thank you

I did add this snippet to base.css and saved but didn’t seem to change.

11

Can you provide your website?

12

jonesflavors.com

13

I did try this before since it shows in your image but this is what I got when I search your website

made4Uo_0-1652731198762.png
made4Uo_0-1652731198762.png3762Ă—1547 140 KB

14

try vanillasoftheworld.com

15

site.JPG
site.JPG1046Ă—906 69.9 KB

16

OK. I fixed the domain name issue in the header. It now reads vanillasoftheworld.com.

Still can use your help with the very faint pin line border.

17

Hi @ALJ ,

Have you tried to make the setting of the button with no box-shadow?

You can also add this code below

.button.button--primary:hover {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
18

OK, thanks. I pasted that code in as well and also revisited button settings (see attached). Still see a faint border.

button shadow.JPG
button shadow.JPG403Ă—840 32.6 KB

19

Hi @ALJ ,

Sorry about that. I did not look on the pseudo items. This should fix it.

.button.button--primary:before {
display: none !important
}

.button.button--primary:after{
display: none !important
}
20

Hi there,

I have a follow up question for Dawn theme. Want to increase the font size of product prices (wherever they appear). Would one edit this existing language inTemplates, product.json

“price”: {
“type”: “price”,
“settings”: {
}

or up in the Layout theme.liquid?