Red dot in assets/base.css after adding code.

[Eliuk]

Hi, I am so confused, after I added a code (code attached below) for hover effect on button, to "Assets/base.css" there is a red dot (pic attached) is that normal or should I remove the code? Everything was fine before that, The code seems to be working but I am just worried about the red dot appearing on the base.css. I am using dawn theme

button:hover, .button:hover {
background-color: #yourcolor; /* Change to your desired hover color */
color: #yourtextcolor; /* Change to your desired text color on hover */
transition: background-color 0.3s ease, color 0.3s ease;
}

​

[BSS-TekLabs]

Try adding a } after line 3574

[BSS-TekLabs]

Add to here @Eliuk 

[PaulNewton]

To clarify media queries need their own closing brace, that added code either overwrote that, subsumed it, or it could have been missing the whole time and only now did the linter register the issue.

When adding new CSS, validate the CSS before and after

https://jigsaw.w3.org/css-validator

For any given CSS band-aid solutions try to use a custom-css setting before modifying files code directly.

This can avoid inadvertently breaking your theme or complicating future version upgrades

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css 

The custom-css setting does not need the surrounding opening and closing style tags: <style>...</style>

If you must modify files directly always make a back up duplicate of the theme first.

And learn how to rollback eligible files though asset files do not get this feature.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code#roll-b... 

[Eliuk]

Thank you, It didn't help, So I just deleted the code.

Is there another way to go about this? I just want the button to change colour on hover.

[BSS-TekLabs · Accepted solution]

Can you delete code in file base.css and add this code to before tag </head> in file theme.liquid

<style>
button:hover, .button:hover {
background-color: #yourcolor; /* Change to your desired hover color */
color: #yourtextcolor; /* Change to your desired text color on hover */
transition: background-color 0.3s ease, color 0.3s ease;
}
</style>

[Eliuk]

Done. Thank you so much!

[PaulNewton]

Put the CSS in a custom-css setting in the theme visual designer per my response above