On the site I am making, the starting chunk of a button has appeared, that I haven’t (to my knowledge) coded for. Further down the page, an ending of the same button size has appeared (they don’t equal a whole). They are the same size, and around the same side of the page, although the one further down is just the ending sticking out from the left of the screen, whereas the one further up is the starting of the button and near a couple of other, proper buttons. The button further up lights up when I hover (this is a feature of the actual buttons), whereas the one further down just cursors (on Chrome, on Safari it lights up).
I checked the code and didn’t see how it could have happened, so I thought it was a glitch. I copy and pasted the html and css into new files, but there was still the random button chunks.
I Googled to see if anyone had a similar problem, but couldn’t find a relevant result.
Ideas? Any help is much appreciated.
<div id="hook-buttons">
<button id="about" type="submit">About</button>
<button id="start-2" type="submit">Start</button>
</div>
</div>
<section>
<div id="about">
<h1 id="about-h">Blah</h1>
<p id="about-p">Blah, blah, blah</p>
<div id="features">
<div class="feature">
<h3>Blah</h3>
<p>Blah, blah, blah/p>
</div>
<div class="feature"">
<h3>Blah</h3>
<p>Blah, blah, blah</p>
</div>
<div class="feature">
<h3>Blah</h3>
<p>Blah, blah, blah/p>
</div>
<div class="feature">
<h3>Blah</h3>
<p>Blah, blah, blah/p>
</div>
<div class="feature">
<h3>Blah</h3>
<p>Blah, blah, blah/p>
</div>
<div class="feature">
<h3>Blah</h3>
<p>Blah, blah, blah</p>
</div>
</div>
</div>
</section>
#hook-buttons {
margin-top: 4vh;
}
#start-2, #about {
margin: auto 60px;
width: 15%;
min-width: 10%;
border-radius: 50px;
padding: 15px;
font-size: 1.7rem;
background: black;
color: white;
cursor: pointer;
display: inline;
}
#start-2 {
margin-left: -1.5vw;
}
#start-2:hover {
box-shadow: inset 220px 0 0 0 gold;
background-position: left;
transition: 0.2s ease-out;
color: black;
}
#about:hover {
box-shadow: inset 220px 0 0 0 gold;
background-position: left;
transition: 0.2s ease-out;
color: black;
}
#start-2, #about, #start-3 {
margin: auto 60px;
width: 15%;
min-width: 150px;
border-radius: 50px;
padding: 15px;
font-size: 1.7rem;
background: black;
color: white;
cursor: pointer;
display: inline;
font-weight: bold;
}
#start-2 {
margin-left: -1.5vw;
}
#about-h {
font-size: 3.3rem;
color: white;
text-align: center;
margin-top: 7.5%;
}
#about-p {
font-size: 1.6rem;
max-width: 930px;
color: white;
text-align: center;
vertical-align: middle;
margin: auto;
}
#features {
display: grid;
grid-template-columns: 1fr 2fr;
align-items: center;
justify-content: center;
column-gap: 150px;
row-gap: 100px;
margin-left: 100px;
margin-right: 75px;
margin-top: 73px;
}
.feature {
font-size: 23px;
width: 450px;
height: 260px;
background-color: black;
color: white;
padding: 25px;
border-radius: 23px;
}
First screenshot is by the ‘start-2’ and ‘about’ buttons. Second screenshot is at the end of the ‘features’ section.