How to modify button hover effect to add transparency and thickness?

Store Design
1

Hey, does anyone know the specific code or how to change when you hover over the shop button that its not grey anymore but transparent and the border gets a little thinker :)? I have this right now:

ScepticalClo_0-1659995199967.png
ScepticalClo_0-1659995199967.png360×205 69.1 KB

i kinda want it to light up or make like the button 1px thicker when hovering over it and clicking on it

Thanks in advance!

webshop: scepticalclothing.com

password: Drop2

1 Like
2

@ScepticalClo - try this css, made border bit thicker

#shopify-section-hero-1 a.btn.hero__btn:hover {border: 2px solid white;}

suyash1_0-1660013207714.png
suyash1_0-1660013207714.png1366×768 246 KB

3

@ScepticalClo

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.hero__inner .hero__btn:hover {
    outline: 2px solid;
}
1 Like
4

hey @KetanKumar thanks for the response, do you also know how to get rid of the gray filled area within the button when hovering over it? thanks!

5

hey thanks i got it but do you know how to get rid of the gray filled area within the button when hovering over it? thanks!