I have created a set of 3 buttons using the code from this resource. However, the buttons are currently positioned vertically close to each other as shown in the source code. I would like to adjust the spacing between them.
Is there a way to achieve this with the provided code below?
The HTML Code
<div class="navBarItems">
<button class="profileItem">My Profile</button>
<button class="exploreItem">Explore</button>
<button class="uploadItem">Upload</button>
<!-- <ul>
<li class="profileItem">My Profile</li>
<li class="exploreItem">Explore</li>
<li class="uploadItem">Upload</li>
</ul> -->
</div>
The CSS Styling
.navBarItems button {
background-color: #282828;
border: none;
color: white;
padding: 20px 24px;
cursor: pointer;
width: 75%;
font-size: 18px;
font: Arial;
font-family: sans-serif;
display: block;
}
.navBarItems button:not(:last-child) {
border-bottom: none;
}
.navBarItems button:hover {
background-color: #393939;
}
Check out how it currently appears: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_button_group_vertical