Chrome Extension; Adding a CSS styled button into page

Question

I am trying to make a floating 'Scroll down' button. For the first part, I am trying to add the button to a page. This is what I did:

ContentScript.js

document.body.onload = addElement;

function addElement () {
    var stb = document.createElement("button");
    stb.className = "stb";
    document.body.appendChild(stb);
}

scrolldownbutton.css

.stb {
    position: fixed;
    display: block;
    bottom: 50px;
    right: 20px;
    z-index: 10001;
    width: 37px;
    height: 37px;
    padding: 0;
    font-size: 24px;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    border-radius: 19px;
    text-decoration: none;
    transition: opacity 0.7s ease-out;
    opacity: 0;
    background: url(tobottom.png) rgba(1, 96, 121, 1) no-repeat 50% 50%;
    color: rgba(255, 255, 255, 1.00);
    box-shadow:0 4px 10px rgba(0, 0, 0, 0.3);
}

However, I can't see any button added. Can someone tell me what is wrong with my code? I am still new to javascript and css, so any help will be welcome!

Answer 1

On the.stb css class, remove the opacity: 0;