How do I organize my css better so that separate a tags don't get the same styling? : <p>This is how my index.php should <a href="https://codepen.io/SuperN00b/pen/rjKOaP" rel="nofollow noreferrer">look</a> (codepen link)</p>

<p>I'm trying to add javascript functions to the buttons on the right. However, there is a styling issue that messes the buttons up. This is what <a href="https://codepen.io/SuperN00b/pen/zNavYX" rel="nofollow noreferrer">happened</a>.</p>

<p>As you can see the log in button has taken the styling of the a tags for the footer.</p>

<p>I don't know much about javascript and got the code from a tutorial I found. I would rather not change the javascript. I'm sure that I probably need to organize my html or css better. If anyone has any tips, I would really appreciate it. I've been stuck on this for two days. </p>

<p>The only way I was able to move the button was styling it in html button </p>

<p>ex: </p>

<p><code>&lt;a id="loginbutton" href="javascript:toggle();" style="top: 220px;"&gt;log in&lt;/a&gt;</code> 
I don't like this solution because I'm going to want to make the webpage responsive. I need to be able to make media queries in the stylesheet. </p>

<p>SUMMARY: </p>

<ol>
<li>When I added the javacript, the styling for the footer tag links (a tag) messes up my button styling. </li>
<li>This needs to be styled in the css file, not the html. </li>
</ol>
