As I attempted to create a game, an immediate CSS issue arose. It seems that the pseudo-classes I am utilizing are not functioning as intended. If you'd like to examine my code, it's available here.
CSS
#button {
width: 200px;
height: 100px;
border-radius: 20px;
background-color: orange;
cursor: pointer;
margin: auto;
margin-top: 250px;
border: 1px solid black;
text-align: center;
font-size: 1.3em;
color: blue;
};
#button:hover {
border: 3px solid black;
};
#button:active {
border: 2px solid black;
};
HTML
<body>
<div id="button">
<p>
Click here to get some money!
</p>
</div>
</body>
Essentially, my goal is to dynamically adjust the border size when the user clicks on the element in order to simulate a button press effect.