After successfully positioning the "choose" button inside a div, I encountered an issue where it only functions properly when hovered over. This occurred while experimenting with hover and positioning on the div element. Without hovering, the 3 buttons appeared in a specific spot that seemed out of place.
If anyone has insights into this problem, I would greatly appreciate your assistance. Thank you for your help!
I apologize for any confusion in the code provided, as I am relatively new to this. Here is the code snippets.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
header {
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
display: flex;
}
li {
list-style: none;
padding: 15px;
}
#header-img {
display: flex;
width: 50px;
height: 50px;
}
@media screen and (max-width: 600px) {
#video {
width: fit-content;
}
}
#container {
width: 80%;
margin: 200px auto 200px auto;
display: flex;
justify-content: space-around;
}
.choices {
background-color: rgb(241, 241, 111);
width: 250px;
height: 400px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.7);
}
.choices .pilih {
position: absolute;
left: 40%;
top: 350px;
}
.choices:hover {
transform: scale(1.5);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5)
}
</style>
<title>Document</title>
</head>
<body>
<header id="header">
<img src="https://png.pngtree.com/element_pic/16/05/30/11574bb301599cc.jpg" alt="" id="header-img">
<nav id="nav-bar">
<ul>
<li><a href="#video" class="nav-link">Features</a></li>
<li><a href="#video" class="nav-link">How it works</a></li>
<li><a href="#video" class="nav-link">Pricing</a></li>
</ul>
</nav>
</header>
<div id="container">
<div class="choices">
<form action="">
<input type="button" value="choose" class="pilih">
</form>
</div>
<div class="choices">
<form action="">
<input type="button" value="choose" class="pilih">
</form>
</div>
<div class="choices">
<form action="">
<input type="button" value="choose" class="pilih">
</form>
</div>
</div>
</body>
</html>