Solved

How to make the border of a button in the slideshow section black only on hover (Dawn 13.0.1)

DRAWandCARE
Pathfinder
118 0 15

Hello there,


I need some help with a CSS code to make the border of a button in the slideshow section of my website (Dawn 13.0.1) black on hover, but yellow (like the background) in the "normal" state.

 

Would be grateful for any help!

 

DRAWandCARE (https://www.drawandcare.com/)

Screenshot_22.png

 

Accepted Solution (1)

Hardik29418
Shopify Partner
2913 419 1080

This is an accepted solution.

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>

.banner__buttons a.button:not([disabled]):hover:after {
box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgb(0 0 0 / 70%), 0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background)) !important;
}

</style>

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 2 (2)

Hardik29418
Shopify Partner
2913 419 1080

This is an accepted solution.

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>

.banner__buttons a.button:not([disabled]):hover:after {
box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgb(0 0 0 / 70%), 0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background)) !important;
}

</style>

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
DRAWandCARE
Pathfinder
118 0 15

Thank you so much, it worked great!  💛