When the "hit" button is clicked, the arrow should move to touch the circle and change the color of the circle.
My goal is to position the circle on the left side and center, with the arrow on the right side and center.
section {
border: 3px solid black;
height: 60vh;
width: 90vh;
margin: auto;
}
h1 {
text-align: center;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
position: relative;
display: flex;
align-items: center;
}
.icon-arrow {
width: 90px;
height: 3px;
background-color: black;
border-radius: 2px;
position: relative;
top: 49px;
float: right;
}
.icon-arrow:after {
content: '';
display: inline-block;
width: 30px;
height: 2px;
background-color: black;
transform: rotate(45deg);
position: absolute;
left: -5px;
top: 11px;
}
.icon-arrow:before {
content: '';
display: inline-block;
width: 30px;
height: 2px;
background-color: black;
transform: rotate(-45deg);
position: absolute;
right: 65px;
bottom: 9px;
}<h1>Bubble App</h1>
<section>
<div class="container">
<div class="circle"></div>
<div class="icon-arrow" style="display: flex; align-items: center; "></div>
</div>
</section>
<div class="button">
<button onclick="hit()">Hit</button>
<button onclick="reset()">Reset</button><br>
</div>I'm facing alignment issues with the circle and arrow, where changing the circle's position affects the arrow's position. How can this be resolved?
Additionally, how do I align the button to the right side under the border section?