Recently, I've been experimenting with button hover effects and some basic JavaScript. Unfortunately, I've encountered a few issues along the way.
Below is the code snippet:
document.querySelector('.btn').addEventListener("click", myfunction());
function myFunction() {
alert("HELLO!");
}#btn {
width: 150px;
height: 100px;
box-sizing: border-box;
margin: 10px;
background-color: #3498db;
border: 15px outset #2980b9;
color: #2c3e50;
font-family: 'Oswald', sans-serif;
font-size: 25px;
font-weight: 700px;
text-tranform: uppercase;
transition: all .5s;
}
#btn:hover {
border: 10px outset #2980b9;
color: #ecf0f1;
font-size: 26px;
}<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<button id="btn" type="button">Click Me</button>
<button id="btn" type="button">Click Me</button>
<button id="btn" type="button">Click Me</button>
<button id="btn" type="button">Click Me</button>The primary issue I'm facing is that the text-transform property doesn't make the letters on the buttons uppercase as intended.
Secondly, when hovering over the buttons, there's a slight layout adjustment causing them to jump by 1 pixel. I've spent quite some time trying to troubleshoot this, but it remains elusive.
Lastly, my JavaScript function isn't working. Given my limited experience with JS, it's likely due to a small syntax error, but I'd appreciate any guidance in resolving it.
Thank you for your help!