ReactJS Webpage not displaying correctly

Question

I have just finished working on a webpage and decided to deploy in on GitHub Pages using Yarn. The problem is everything looked good when it was running on localhost but some things didn't display correctly on deployed version in my browser.

I tested it on browsers:

1. Google Chrome 86.0.4240.193
2. Safari 13.1

In both the same issue appeared. Here are some screenshots of comparison when running on localhost and online:

Localhost:

Online:

On the second one there is a barely visible outline of my buttons. I was thinking some of my CSS may have caused this so here is also my styling for these buttons:

.button {
    width: 29vw;
    height: 40vh;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    border: 3px solid black;
    border-radius: 10px;
    outline: none;
    padding: none;
    cursor: pointer;   
    opacity: 70%;
    font-family: myFont;
    font-size: 6vh;
    color: black;
}

.button:hover {
    opacity: 100%;
    animation: swing 1s;
}

Any idea why is this happening? Thank you for any help.

Answer 1

After some time playing with my CSS I found what the problem was and was able to fix it. Indeed my initial thoughts were right and opacity was causing this problem was.

If anyone else has the same problem here is a quick fix. Just change from:

opacity: 70%;

to:

opacity: 0.7;