Help on my code


#1

So I'm using my HTML, CSS and javascript skills I've learned and making a random website for practice. I'm having some trouble with making the button a different color.

yeah i know my code looks awful, but practice makes perfect. Please be sure to let me know what I can do to improve my code. Thank you!

HTML:




Things and Stuff





Welcome to Things
and Stuff!


Buy, sell, and connect



<div id="header-text">
 <h3>What we do</h3>
 </div>
 <div class="whatWeDo">
 <p> Here at Things and Stuff, we stive to help outside<br> sellers, sell their product through
 a third party campain.<br>We understand how hard it is may be sell your product on your own or<br>
 having to pay a major website or company to be the third party where they might get most of the cut.
 We specialize in helping<br> your product become successful!
 We want to ensure you are getting the profit<br> you deserve for your hard work.</p>
 </div>

How It Works





  • Pay a one time fee of $100.00 to get your product registered and ready to sell

  • We put your product out on our website, ads across the internet, and the more

    your product is viewed, and purchased, the more it will show on our "Featured Products" page.

  • It's also up to you to give your product as much information you can.
    along with what it can do,
    why someone should buy it, your asking price, ect.

  • Give us the information about your product and we'll take it from there!

  • Over time if your product sells 10, 100, 1,000 and so forth and you are still using our service,

    we get 18% of the profit at the end of each month and you get to keep the rest
    and congratulate yourself on
    a job well done!


   <h4> <a href="https://www.thingsandstuff.com/successstory.com/">This Months Success Story</a></h4>
    <p id="productOfTheMonth">Who Has The Product of the Month?!</p>
     <button onclick="button()">Find out here!</button>
     <script> function button() {
     	document.getElementById("productOfTheMonth").innerHTML = "Aaron Baker!";
     }
     </script>

CSS:

header {
font-family: Arial;
text-align: center;
background-image:
url("https://s-media-cache-ak0.pinimg.com/originals/5f/c5/34/5fc5348121c8d2835e7a56e353293e85.jpg");
background-position: center center;
background-size: cover;
height: 650px;
width: 100%;
}

header-text {

margin: 0 auto;
position: relative;
text-align: center;
top: 25%;
width: 500px;
padding: 10px 10px;
border: solid black;
border-radius: 75px 75px;
margin-top: 5px;
opacity: 0.8;
color: white;

}

h3 {
font-family: serif;
text-align: center;
font-size: 35px;

}
body {
background-image: url("http://amxxcs.ru/download/stars-in-space-background-OH1Cf1c");
background-size: cover;
background-position: center center;
height: 650px;
width: 100%;

}

.whatWeDo {
margin: 0 auto;
position: relative;
text-align: center;
top: 25%;
border-radius: 60px 15px;
border: solid black;
margin-top: 5px;
width: 500px;
color: white;
opacity: 0.7;
}

.howItWorks {
margin: 0 auto;
position: relative;
text-align: center;
top: 25%;
border-radius: 60px 15px;
border: solid black;
margin-top: 5px;
width: 500px;
color: white;
opacity: 0.6;

}

h1 {
text-align: center;
font-size: 30px;
}

a:link {
color:lightwhite;
}
h4 a:link {
color: maroon;
}

p.aaron {
color: white;
}

.button {
color: pink;
}

ul {
list-style-type: none;
margin: 0;
padding: 10;
overflow: hidden;
}

li {
float: left;
opacity: 50%;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: lightblue;
}


#2

So i think i figured it out, I did:

    <div id="button">
     <button onclick="button()">Find out here!</button>
     <script> function button() {
     	document.getElementById("productOfTheMonth").innerHTML = "Aaron Baker!";
     	$('button').on("click",function(){
     		$(this).toggleClass('button');
     	});
     }
   And for CSS, I did:

#button button {
background-color: black;
color: purple;
}

It changed the color of my button, but there is still a little white around the button, like if its a border.
Feel free to tell me an alternate way to do this or any way to improve my code. thank you!