如何使用HTML/CSS使按钮可点击?它需要与图像上的标题一起居中

Question

我正试图在链接到同一网站内另一页面的图像上创建一个按钮。。。我在编码方面不是很有经验，但能够在网上找到一些帮助我创建所需内容的东西。主要的问题是，我无法使按钮可点击，也不确定在哪里插入链接到我试图指向的页面的代码。以下是我目前所拥有的HTML：

<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">
<input type="button" class="albumbutton1" value="LISTEN">
</div>

CSS：

.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;
}

我是新来的，所以我不能上传图像，但你可以在这里看到图像/按钮：ZL Bandsite-带按钮的横幅Img

任何帮助都将不胜感激！

Answer 1

一般规则是，如果单击元素导致加载新页面，则使用锚点。因此，在您的情况下，我将使用以下内容：

<a href="new-page.html" class="albumbutton1">
  <span>LISTEN</span>
</a>

锚点自然链接到新页面，因此不需要创建额外的JavaScript。

为了使锚文本水平和垂直居中，我添加了以下内容：

.albumbutton1 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

下面是一个演示：https://jsfiddle.net/mkwmsd2d/

Answer 2

如果您有一个图像要用作输入按钮，您可以使用以下css

.button {
  background-image: url ('/image.png') no-repeat;
}

Answer 3

您应该使用h1、p和a标记，而不是使用input元素。

您可以使用a标记创建指向其他页面的"可点击"链接。

<div class="album">
  <h1>INNER CIRCLE</h1>
  <p>Debut Album Available Now</p>
  <a href="#">LISTEN</a>
</div>

你所需要做的就是将#替换为你想要的url。

请参阅：https://jsfiddle.net/gosh95zb/

Answer 4

简单的一个。只需在按钮上添加一个触发器。

<input type="button" onclick="javascript:window.open('http://www.google.com.br');" class="albumbutton1" value="LISTEN">

示例：http://jsfiddle.net/xqc36Lht/