Button's color doesn't change in css, javascript

user_17468263 0
Viewed 116

I'm new to web and css. I've tried to make my button prettier, but the color of the button didn't change. Sorry if it was just my foolish mistake.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Search Maker</title>
</head>
<body>
    <div class="title-h1">
        <h1>
            Simple Word Search maker
        </h1>
    </div>
    <div class="start">
        <button id="start-button">Start ➝</button>    
    </div>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</body>
</html>

style.css:

html {
    background-color: lavender;
}
#start-button {
    background-color: transparent;
    border: solid 1px black;
    border-radius: 6px;
    width: 100px;
    height: 25px;
    box-align: center;
    font-size: 15px;
    text-align: center;
}

.start {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.title-h1 {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.active {
    background-color: #374151;
    border: solid 1px black;
    border-radius: 6px;
    width: 100px;
    height: 25px;
    box-align: center;
    font-size: 15px;
    text-align: center;
    transition: 0.5s;
    color: white;
}

script.js

const startButton = document.querySelector("#start-button");
const activeclass = "active";

function handlestartBtnMouseEnter() {
    startButton.classList.add(activeclass);

}

function handlestartBtnMouseLeave() {
    startButton.classList.remove(activeclass);
}

startButton.addEventListener("mouseenter", handlestartBtnMouseEnter);
startButton.addEventListener("mouseleave", handlestartBtnMouseLeave);

This code changed text's color to white, but button's color didn't changed. I saw class was added. Sorry for grammers and spell errors. English is not my first language.

css html javascript
5 Answers

After you add the .active class with JavaScript your element has a class and an ID in which case the ID is prioritized. Since your element didn't have a font color it applies it but it can't overwrite your background-color.

I suggest to not use JavaScript at all here unless you have a special reason. Just use the pseudo class :hover like this:

#start-button:hover {
    background-color: #374151;
    transition: 0.5s;
    color: white;
}

In case you want to use JavaScript anyways you can fix your specificity issue by updating the selector as mentioned in another answer:

#start-button.active {
    background-color: #374151;
    transition: 0.5s;
    color: white;
}
user_169329800
user_136013910

It is because when the mouse enters the button, the first background color that is being applied on the button is the transparent color that is stated in #start-button. The way css work, it will apply the first property it catch for a specific element if it is mentioned twice in in different classes so to force css to apply the color you want when the active class is triggered you should add !important to the background-color in the active class like this:

background-color: #374151 !important;

user_164000070 

const startButton = document.querySelector("#start-button");
const activeclass = "active";

function handlestartBtnMouseEnter() {
    startButton.classList.add(activeclass);

}

function handlestartBtnMouseLeave() {
    startButton.classList.remove(activeclass);
}

startButton.addEventListener("mouseenter", handlestartBtnMouseEnter);
startButton.addEventListener("mouseleave", handlestartBtnMouseLeave);
html {
    background-color: lavender;
}
#start-button {
    background-color: transparent;
    border: solid 1px black;
    border-radius: 6px;
    width: 100px;
    height: 25px;
    box-align: center;
    font-size: 15px;
    text-align: center;
}

.start {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.title-h1 {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

#start-button.active {
    background-color: #374151;
    border: solid 1px black;
    border-radius: 6px;
    width: 100px;
    height: 25px;
    box-align: center;
    font-size: 15px;
    text-align: center;
    transition: 0.5s;
    color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Search Maker</title>
</head>
<body>
    <div class="title-h1">
        <h1>
            Simple Word Search maker
        </h1>
    </div>
    <div class="start">
        <button id="start-button">Start ➝</button>    
    </div>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</body>
</html>

user_169149360

  • If you want to change background color

    background-color: lavender /* or any color */

  • If you want to make background transparent

     html {
 background-color: lavender; /* or any color */
 }

 background-color: rgba(255, 255, 255, 0);
user_155414900
Related