I'm having trouble changing the background color of a button in CSS. The CSS link is working perfectly fine, and the button changes color when I attempt to apply Bootstrap or use DOM to change it, but not when I use pure CSS.
Here's the code snippet:
// let sexybutton= document.querySelector('.sexy');
// sexybutton.style.backgroundColor="red";
// console.log(sexybutton.style);
//Currently commented out because I don't want to do it this way. Adding this here to mention that the button style does change using this method..body{
background-color: #CCD6A6;
}
.sexy{
background-color: red;
}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>Document</title>
<script src="https://kit.fontawesome.com/fdee82af88.js" crossorigin="anonymous"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/album/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="style.css">
</head>
<body class="body">
<button class="sexy" type="submit">Click this</button>
</body>
<script src="index.js"></script>
</html>