I'm in the process of creating a button overlay on an image that directs to another page within the same site. I don't have much experience with coding, but with some online resources, I was able to piece together what I needed. The issue I'm facing is making the button clickable and figuring out where to place the code that will link to the target page. Here's the current HTML markup:
<div class="albumimagewrap">
<img src="https://static1.squarespace.com/static/55d3ad3ee4b0adc8c326fe3f/t/57967922e6f2e14eefb8c308/1469479203582/Artboard+1.png?format=1000w" width="100%" height="100%">
<input type="h1" class="albumtitleimg" value="INNER CIRCLE">
<input type="p" class="albumtextimg" value="Debut Album Available Now">
<button class="albumbutton1">LISTEN</button>
</div>
And here's the relevant CSS styling:
.albumimagewrap {
position:relative;left:0;top:0;
width: 100%;
height: 100%;
padding-top:0%
}
.albumtitleimg {
display: block;
position:absolute;
margin: auto;
width: 250px;
top:20%;right:0%;left:0%;
text-align: center;
font-size: 25px;
color:#ffffff;
background-color:transparent;
border: 0px;
}
.albumtextimg {
display: block;
position:absolute;
margin:auto;
width: 250px;
top:40%;right:0%;left:0%;
text-align: center;
font-size: 14px;
color:#ffffff;
background-color:transparent;
border: 0px;
}
.albumbutton1 {
display: block;
position:absolute;
margin:auto;
top:60%;right:0%;left:0%;
width: 240px;
height: 50px;
text-align: center;
background-color:transparent;
color: #ffffff;
border: 2px solid #BD9F6C;
}
Unfortunately, I can't upload images as I'm new here, but you can view the image/button setup here.
Your help would be greatly appreciated!