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.
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;
}
use to peseudo-class go to link:enter link description here
#start-button:active {
// your style ------
}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;