Having trouble with buttons

I’ve been struggling the last few days with making a functional stylized button. I am still really new, so I’m sure I’m missing something.

From what I understand, this code should make a basic submit button with a background that changes colors when hovered over. All I seem to get is an underlined link, though the text does change color.

<!DOCTYPE html>
<style>
body,
input,
button {
font: 24px "impact", Comic Sans MS;
{

.button {
padding: 15px, 45px;
display: inline-box;
text-decoration: none;
border-radius: 3px;
}

.button-primary {
background: spray;
color: blue;
}

.button-primary:hover {
background: Hummingbird;
};
</style>
<body>
<a href="#" class="button button-primary">Submit</a>
</body>
</html>

All you’ve defined in HTML is a link, that’s why you see a link. HTML has a button element which you’re not using. Google it and read up on it and you’ll resolve your issue.

Some of the CSS is working.

  1. Here you are styling a button element, but you don’t have a button element in the HTML. Also, you are missing the closing curly bracket } you have two opening brackets.
body,
input,
button {
font: 24px "impact", Comic Sans MS;
{ <-- should be a closing }
  1. What is spray and Hummingbird supposed to be? Also, you have a semicolon at the end that shouldn’t be there.
.button-primary {
background: spray;
color: blue;
}

.button-primary:hover {
background: Hummingbird;
}; <-- remove this semicolon

Spray and hummingbird are what I thought were color names I got from a color theme website. The original code had hex numbers for the colors, but when I was writing the post, I noticed they were missing, so I just threw them in.

They are not valid color names. Use the hex codes instead.

I went back and plugged them in. I also tried your suggestions and am still not getting anything. I feel like I’m dancing around the right answer, just not quite there yet.

<!DOCTYPE html>
<style>
body,
input,
button {
font: 24px "impact", Comic Sans MS;
{

.button {
padding: 15px, 45px;
display: inline-box;
text-decoration: none;
border-radius: 3px;
}

.button {
background:#2EFFCD;
color: blue;
}

.button:hover {
background:#AED6F1;
}
</style>
<body>
<button><a href="#" class="button button-primary">Submit</a></button>
</body>
</html>

You still didn’t close the first style block correctly. And again button is an element .button is a class.
https://codepen.io/anon/pen/RzjMxB

Edit: you also had some invalid CSS, I updated the Codepen make sure to refresh.

Hey, thanks man, I’ve been using you code from that pen to figure a few different things out, it’s been working very nicely!