I'm struggling with getting my buttons to appear active. They currently don't have any functionality and lack a hover effect when clicked. Despite my efforts to add effects, nothing seems to change.
After experimenting with the CSS, I've noticed that removing padding from the container sometimes makes the buttons active again. It's inconsistent, though.
As a newbie in website development, this is my first serious attempt at building a site. My previous experience with HTML/CSS was merely for fun, so I'm unsure of what steps to take next.
If you have any suggestions or guidance, please share them. Thank you!
.container {
padding: 10%;
}
h1 {
color: #FFEA9F;
margin: 0 auto 0 auto;
font-size: 30px;
letter-spacing: 15px;
font-family: 'Fira Code', monospace;
text-align: center;
}
body {
border: 20px;
padding: 20px;
margin: 0 auto 0 auto;
background:linear-gradient(to right,#FFE899,#F48C30);
}
.bottom {
position:fixed;
bottom: 0;
width: 100%;
left: 0;
}
#mainNav {
font-weight: 100;
opacity: 0.9;
font-family: "Nunito", sans-serif;
}
#mainNav .navbar-brand {
color: #FFEA9F;
}
#mainNav .nav-link {
color: #FFEA9F;
}
#mainNav .nav-link:hover {
color: #F48C30;
}
.collapse {
color: #FFEA9F;
}
.button {
background-color: #8C1909;
border: none;
color: #FFEA9F;
/*padding: 10px 25px;*/
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 36px;
letter-spacing: 5px;
font-family: 'Fira Code', monospace;
opacity: 0.8;
border-radius: 8px;
box-shadow: 1px 1px #544D4D;
grid-row-start:1;
}
.button2 {
background-color: #8C1909;
border: none;
color: #FFEA9F;
text-align: center;
display: inline-block;
font-size: 36px;
letter-spacing: 5px;
font-family: 'Fira Code', monospace;
opacity: 0.8;
border-radius: 8px;
box-shadow: 1px 1px #544D4D;
}<link rel="stylesheet" type="text/css" href="testing2.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Fira+Code|Red+Hat+Text&display=swap" rel="stylesheet">
<body>
<nav id="mainNav" class="navbar fixed-top navbar-dark navbar-expand-md" style="background-color: #8C1909">
<a href="#" class="navbar-brand">HOME</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
<a href="https://google.com/maps" class="nav-link">MAPS</a>
</li>
<li class="nav-item">
<a href="https://instagram.com/venture.mars" class="nav-link"><i class="fab fa-instagram"></i></a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1 class="text-center">VENTURE.MARS</h1>
<div class="d-flex justify-content-around align-items-center flex-column flex-md-row" style="height: 200px">
<button class="button" type="submit">CREATE</button>
<button class="button2" type="submit">EXPLORE</button>
</div>
</div>
<div class="bottom">
<img src="background_bottom2.svg">
</div>
</body>I want to address why the buttons only become active without padding.
Your feedback on other possible issues would be greatly appreciated. While learning Java in the past, I was encouraged to write practical code without resorting to workarounds. Unfortunately, I feel like I've been relying on many workarounds while navigating the world of HTML/CSS on my own.