Button hover css


I have the below css and wanted to know if the hover selector can be within the button element or does the hover selector needs to be defined outside button element.

I’m following the css style in the codepen below:

 background: var(--base-color);
 border: solid 1px var(--white);
 font-size: 1.2em;
 padding: 18px 10px;
 width: 180px;
 margin: 10px;
  outline: none;
  :hover {
    background: var(--white);
    border: solid 1px var(--white);
    color: var(--base-color)  


It’s something which you can do with Sass (and other CSS preprocessors), not 100% sure if it’s supported in vanilla CSS though…

Here’s the documentation.

You need to do &:hover on your nested selector. & referring to the parent selector, so in

button {
    &:hover {

the & refers to button.

yeah, does not working in vanilla CSS.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.