How do i change CSS elements using javascript and a HTML button [duplicate]

This question already has an answer here:

• Changing CSS Values with Javascript 7 answers

i'm quite new to HTML, CSS and Javascript, but i would like to know how i could change my CSS elements using javascript and get that to interact with a HTML button. What i mean by this is that if i press a button made with HTML, i could have a shape in CSS which could be hidden and shown by a press of that button.

HTML -

    <button type="button">HIDE THE SQUARE PLEASE :(  </button>
    <div id="red"></div>

CSS -

    #red {
    width: 100px;
    height: 100px;
    background: red;
    }

So how would i get that square to be hidden and appear at the press of a button using javascript?