In order to create interactive buttons for a website, I designed four unique .PNG images using Photoshop. Two of these images are intended to serve as default buttons, while the other two are meant to be used as "post-click" buttons.
For the default buttons, I assigned separate IDs:
#PlayButton {
display: inline-block;
width: 10%;
position: relative;
margin-left: auto;
margin-right: auto;
}
#AboutButton {
display: inline-block;
width: 10%;
position: relative;
margin-left: auto;
margin-right: auto;
}
To group these buttons together, I placed them within a class named "Buttons". Here is the code structure:
<div class="Buttons">
<img src="Play Button.png" id="PlayButton">
<img src="About Button.png" id="AboutButton">
</div>