getting error while adding css to button in my react js app-CodePudding

I was styling a button in my react js website and got this error while writing the css for it, actually I was going to animate it after hovering the mouse. its showing the following errors

1.colon expected [11,9] 2.semi-colon expected [12,18] 3. { expected [13, 14] 4. at-rule or selector expected[15,5] 5. } expected [31,13] 6. identifier expected [34,19] 7. { expected [35,20] 8. at-rule or selector expected [36,9]

button{
    background: black;
    border: none;
    padding: 10px 20px;
    display: inline-block;
    font-size: 1rem;
    font-weight: 800;
    width: 200;
    cursor: pointer;
    transform: skew(-21deg);
    span{
        display: inline-block;
    transform: skew(21deg);

    }

    ::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 100%;
        left: 100%;
        background: #000;
        opacity: 0;
        z-index: -1;
        transition: all 0.5s;
    }
    
    ::hover{
        color: #fff;
            ::before{
            left: 0;
            right:0;
            opacity: 1;
        }
    }
    
}

CodePudding user response：

Assuming that you're using standard stylesheet, you can't use nesting in styles. For example:

button {
   span {
       ...
   }
   ::hover {
       ...
   }
}

Css shown in snippet above is not valid(or standard) css. You can either do something like this:

button {
   ...
}
button span {
    ...
}
button::hover {
    ...
}

or you can use scss, which is a css preprocessor and allows you to use nesting and other cool features. For details or more ways to implement css in React, read this.