I have an HTML code linked to a CSS file where I'd like to style buttons. The button styles are defined in the CSS file.
Everything else is working fine, but when I attempt to apply the styled button, it reverts back to a standard HTML button unless the style is directly in the HTML file.
Here's the HTML snippet:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/css/main.css" />
</head>
<body>
<input type='button' id='button' class="button" value='Button' onclick='AddOne()'>
(function defined here, works correctly)
</body>
</html>
The CSS stylesheet contains the following styles for the button:
.button {
background-color: #CCCCCC;
border: none;
color: white;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button:hover {
background-color: #535362;
}
If I manually add the button styles within the HTML file itself, it displays correctly. However, I'm looking for a solution that doesn't involve adding the style block each time I use a button to avoid repetition and keep the styling centralized in the CSS file.