如何使用HTML/CSS點擊按鈕？它需要被集中在一個圖像上的標題

我試圖創建一個按鈕，鏈接到另一個頁面內的圖像，在同一個網站...我不是很有經驗的編碼，但能夠在網上找到一些幫助我創建我需要的東西。主要問題是我沒有能夠使按鈕可點擊，並且不確定在哪裏插入將鏈接到我試圖指向的頁面的代碼。這裏是我到目前爲止 - HTML：如何使用HTML/CSS點擊按鈕？它需要被集中在一個圖像上的標題

<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 - Banner Img with Button

任何幫助瘋狂讚賞！

來源

2016-07-26 anonimax

一般規則是，如果單擊某個元素會導致加載新頁面，請使用錨點。所以，你的情況，我會用以下內容：

<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/

來源

2016-07-26 18:36:07

非常感謝，安迪！它工作得很好。感謝所有的幫助！ – anonimax

@anonimax很高興幫助。如果可以的話，如果你能接受我的答案，我會很感激。點擊該帖子下方的複選標記，在左側。 –

完成！我還有一個問題 - 我剛剛在移動設備上查看了該網站，並且按鈕和文本開始重疊。使其響應的最佳方式是什麼？ – anonimax

如果您想要爲輸入按鈕使用的圖像，您可以使用以下css

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

來源

2016-07-26 18:36:42 JakeGill70

-1

簡單的一個。只需在按鈕上添加一個觸發器即可。

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

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

來源

2016-07-26 18:46:54

而不是使用input元素，你應該使用h1，p和a標籤。

您可以使用a標籤將「可點擊」鏈接用於其他頁面。

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

您只需將＃替換爲您想要轉到的網址即可。

請參閱：https://jsfiddle.net/gosh95zb/

來源

2016-07-26 18:59:19

如何使用HTML/CSS點擊按鈕？它需要被集中在一個圖像上的標題

回答

相關問題