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.
2
Answers
It seems like you have a couple of issues in your code:
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,