i am trying to make it so when u hover on the buttons they are opacity 0.7 and curser pointer but it wont work it wont even work with the a element
my code so far:
style:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Website.com</title>
<style>
body {
background-color: black;
font-family: cursive;
overflow: hidden;
}
.glow {
text-align: center;
color: white;
width: 100%;
height: 40px;
position: absolute;
top: 0;
left: 0;
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
.navlinks {
float: right;
}
.navlinks a{
padding: 30px;
}
.navlinks a:hover {
cursor: pointer;
}
button {
background-color: black;
border: 2px solid red;
}
button:hover {
cursor: pointer;
opacity: 0.7;
}
</style>
</head>
body:
<body>
<main>
<div class="glow"> <!---->
</div>
<span class="navlinks">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<button>Sign Up</button>
<button>Create An Account</button>
</span>
</main>
</body>
</html>