How do I fix CSS styling inside of another element?

Question

I'm trying to get a button to be the purple color listed within the code, but it refuses to show.

Here is the HTML:

function showSidebar() {
  const sidebar = document.querySelector('.sidebar')
  sidebar.style.display = 'flex'
}

function hideSidebar() {
  const sidebar = document.querySelector('sidebar')
  sidebar.style.display = 'none'
}

.sidebar {
  position: fixed;
  height: 100vh;
  flex-direction: column;
  display: none;
  width: 250px;
  background-color: #333;
  align-items: flex-start;
  justify-content: flex-start;
}

.sidebar a {
  font-size: 20px;
  color: white;
  font-weight: 400;
  margin-top: 100px;
  width: 100%;
  text-decoration: none;
}

.sidebar a {
  width: 100%;
}

.sidebar a:hover {
  color: black;
}

.button {
  position: absolute;
  border-radius: 30px;
  align-items: center;
  align-content: center;
  padding: 15px;
  margin-top: 7.5%;
  margin-left: 43.5%;
  font-size: 30px;
  color: white;
  background-color: #4616e0;
  font-family: 'Barlow', sans-serif;
  transition-timing-function: ease;
  transition-duration: 0.3s;
  border-width: 10px;
  border: #c1affa outset;
}

.button:hover {
  background-color: #a394d4;
  color: #4616e0;
  transform: translateY(-10px);
  border: #4616e0 outset;
  border-width: 3px;
}

<article class="main">
  <p>Interested in joining? What are you waiting for?</p>
  <a href="https://discord.gg/Ncs6n66vCF">
    <button class="button">LET ME IN!</button>
  </a>
</article>
<footer class="footer">
  <h1>Footer that will have stuff in it</h1>
</footer>
</div>

I'm wanting the button to show up like this (reformatting my pages, and for some reason this doesn't work): How I want the button to show.

But the button shows up like this: How the button shows.

I'm wondering where I went wrong in the code that is causing every change I make to be completely nullified.

Answer 1

It seems like you have a couple of issues in your code:

The JavaScript code is missing script tags.
In the hideSidebar() function, you're missing a dot in the query Selector to select the class .sidebar.
In the CSS, you're using the same selector .sidebar a twice, which can be combined.
You need to add the button class to the button element in your HTML.

Answer 2

Umm, after seeing your code, and trying out in my end. I saw that the code is perfect and the button is as like you wanted, I think you should try removing your browser cache, Or there is another possibility if you have wrote your styles in another css file, you may check that you have properly connected the style file with the html. the code I tried,

<article class = "main">
    <p>Interested in joining? What are you waiting for?</p>
    <a href="https://discord.gg/Ncs6n66vCF">
        <button class="button" >LET ME IN!</button>
    </a>
            </article>
            <!-- <aside class="aside aside1">
                <h1></h1> 
            </aside>
            <aside class="aside aside1">
                <h1></h1>
            </aside>
            -->
          <footer class="footer">
            <h1>Footer that will have stuff in it</h1>
          </footer>
        </div>
        <script>
            function showSidebar() {
                const sidebar = document.querySelector('.sidebar')
                sidebar.style.display = 'flex'
            }
            function hideSidebar() {
                const sidebar = document.querySelector('sidebar')
                sidebar.style.display = 'none'
            }
        </script>

<style>
    .sidebar {
    position: fixed;
    height: 100vh;
    flex-direction: column;
    display: none;
    width: 250px;
    background-color: #333;
    align-items: flex-start;
    justify-content: flex-start;
}

.sidebar a {
    font-size: 20px;
    color: white;
    font-weight: 400;
    margin-top: 100px;
    width: 100%;
    text-decoration: none;
}

.sidebar a {
    width: 100%;
}

.sidebar a:hover {
    color: black;
}

.button {
    position: absolute;
    border-radius: 30px;
    align-items: center;
    align-content: center;
    padding: 15px;
    margin-top: 7.5%;
    margin-left: 43.5%;
    font-size: 30px;
    color: white;
    background-color: #4616e0;
    font-family: 'Barlow', sans-serif;
    transition-timing-function: ease;
    transition-duration: 0.3s;
    border-width: 10px;
    border: #c1affa outset;
}

.button:hover {
    background-color: #a394d4;
    color:#4616e0;
    transform: translateY(-10px);
    border: #4616e0 outset;
    border-width: 3px;
}
</style>