Buttons not displaying properly

Question

Its been a long time since I've screwed around with html/css and I'm trying to implement a couple sample buttons. Its running fine in jsfiddle and other code runners but when I try to run in through notepad++ it comes out as in html format rather than css

Take a look

body {
  background-color: #9e9a75
}

.B1 {
  background: #b5ad67;
  background-image: -webkit-linear-gradient(top, #b5ad67, b5ad67);
  background-image: -moz-linear-gradient(top, #b5ad67, b5ad67);
  background-image: -ms-linear-gradient(top, #b5ad67, b5ad67);
  background-image: -o-linear-gradient(top, #b5ad67, b5ad67);
  background-image: linear-gradient(to bottom, #b5ad67, b5ad67);
  -webkit-border-radius: 9;
  -moz-border-radius: 9;
  border-radius: 9px;
  -webkit-box-shadow: 3px 3px 12px #666666;
  -moz-box-shadow: 3px 3px 12px #666666;
  box-shadow: 3px 3px 12px #666666;
  font-family: Georgia;
  color: #7a7448;
  font-size: 20px;
  padding: 20px 20px 20px 20px;
  text-decoration: none;
}

.B1:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

<!DOCTYPE html?
<html>

<head>
  <title>Big Bite Tackle</title>
  <link rel="stylesheet" type="text/css" href="Styles.css">
</head>

<body>

</body>

<div>
  <CENTER>
    <a class="B1" href="http://www.google.com" <strong>Meet the man</a>
    <a class="B1" href="http://www.google.com" <strong>Shop</a>
    <a class="B1" href="http://www.google.com" <strong>Contact and Support</a>
  </CENTER>
</div>

<center>
  <img src="BBTTITLE.PNG">
</center>

This is what its coming out to be when I run it on my own https://gyazo.com/5639170d4b29d5c966427a4953482c8f

yeah I know like I said this is just kinda of a test page its nothing special obviously if I was working on something more serious id do it differently — Lucas, Feb 26 '18 at 01:56
I'm confused as to why its running as html when I do it myself but its running as css through jsfiddle and here — Lucas, Feb 26 '18 at 01:56

kravis · Answer 1 · 2018-02-26T02:11:45.520

You have a few typos with your anchor tags. <a> wasn't closed and <strong> didn't have a closing tag. Main code should be placed inside <body></body>. I did some alterations to your code below. Also, <center> is deprecated.

body {
  background-color: #9e9a75
}

.center{
 text-align: center;
}

.B1 {
  background: #b5ad67;
  background-image: -webkit-linear-gradient(top, #b5ad67, b5ad67);
  background-image: -moz-linear-gradient(top, #b5ad67, b5ad67);
  background-image: -ms-linear-gradient(top, #b5ad67, b5ad67);
  background-image: -o-linear-gradient(top, #b5ad67, b5ad67);
  background-image: linear-gradient(to bottom, #b5ad67, b5ad67);
  -webkit-border-radius: 9;
  -moz-border-radius: 9;
  border-radius: 9px;
  -webkit-box-shadow: 3px 3px 12px #666666;
  -moz-box-shadow: 3px 3px 12px #666666;
  box-shadow: 3px 3px 12px #666666;
  font-family: Georgia;
  color: #7a7448;
  font-size: 20px;
  padding: 10px;
  text-decoration: none;
}

.B1:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

<!DOCTYPE html?
<html>

<head>
  <title>Big Bite Tackle</title>
  <link rel="stylesheet" type="text/css" href="Styles.css">
</head>

<body>
  <div class="center">
    <a class="B1" href="http://www.google.com"><strong>Meet the man</strong></a>
    <a class="B1" href="http://www.google.com"><strong>Shop</strong></a>
    <a class="B1" href="http://www.google.com"><strong>Contact and Support</strong></a>
  </div>
</body>

Whats the easiest way to way to center those buttons and images? — Lucas, Feb 26 '18 at 02:09
I updated my answer to include center class, but I believe you would like to read this [answer](https://stackoverflow.com/a/22776174/6108936) for a full answer — kravis, Feb 26 '18 at 02:13

Buttons not displaying properly

1 Answers1