用CSS按鈕打開一個新窗口

-1

任何人都可以告訴我使用哪個代碼將CSS按鈕打開到新窗口中？我看到在我的網站上爲超鏈接執行此操作的代碼是：target="_blank"。但是，我無法弄清楚如何將這些代碼與CSS按鈕結合使用？我的CSS按鈕的代碼是：用CSS按鈕打開一個新窗口

<p style="text-align: center;"> 
[button-link url="http://survey.constantcontact.com/survey/a07eaydg1tyi98r263b/a0114ieuk39a5/greeting"] 
TAKE THE SURVEY HERE » 
[/button-link] 
</p>

我會在哪裏插入target="_blank"代碼在我的CSS代碼來創建相同的「新窗口」效應我能夠用一個超鏈接創建？

謝謝，謝謝！

卡桑德拉

來源

2016-02-28 Cassandra

你爲什麼要使用一個CSS按鈕，而不是一個錨鏈接？ – Martin

你不能做你想要達到的目標。只能用HTML表單輸入元素或HTML錨元素實際上製作「按鈕」。此外，在新窗口中打開鏈接的target=_blank聲明僅適用於HTML錨點元素，並且不適用於假裝爲錨點的其他事物。

，你應該做的事情：

<p class="paragraph"> 
<a href="http://survey.constantcontact.com/survey/a07eaydg1tyi98r263b/a0114ieuk39a5/greeting" target="_blank"> 
TAKE THE SURVEY HERE »</a> 
</p>

這裏target=_blank已插入錨固件，這完全可以解決你的問題。

然後，您可以也應用CSS樣式到.paragraph定義和造型的錨錨子部分這樣：

CSS：

.paragraph{ 
    text-align:center; 
} 
.paragraph a { 
    font-color:#dd0000; 
    display:inline-block; 
    border:1px solid #000; 
}

來源

2016-02-28 00:53:11 Martin

非常感謝您的詳細回覆......真的非常感謝。我不明白爲什麼這是不可能的一個按鈕，但感謝您的解釋和備選方案。 --Candandra – Cassandra

@Cassandra簡單的解決方案是讓你的錨標籤看起來像一個CSS樣式的按鈕。 – Martin

嘗試this.just副本，粘貼並運行它。

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<title>Test</title> 
 
</head> 
 
<style type="text/css"> 
 
body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
a{ 
 
    background-color: orange; 
 
    border:3px outset black; 
 
    border-radius: 5px; 
 
    text-decoration: none; 
 
    color: black; 
 
    font-size: 20px; 
 
    position: absolute; 
 

 
} 
 

 
a:focus{ 
 
    background-color: white; 
 
} 
 

 

 

 

 
</style> 
 

 
<a href="#" tabindex="0" target="_blank"> TAKE THE SURVEY HERE » </a> 
 

 
</body> 
 
</html>

來源

2016-02-28 05:52:29

非常感謝你！我不希望任何人花時間爲我寫這段代碼......真的，非常感謝。不幸的是，這段代碼並沒有創建我正在尋找的「按鈕」效果，我認爲這是不可能的。但是，謝謝你的回覆和幫助！ -Cassandra – Cassandra

你期望什麼類型的按鈕。把你看到的圖像或鏈接 –

我使你一個很好的按鈕位置：DEMO

.btn { 
 
    background: #3498db; 
 
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -moz-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -ms-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -o-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: linear-gradient(to bottom, #3498db, #2980b9); 
 
    -webkit-border-radius: 28; 
 
    -moz-border-radius: 28; 
 
    border-radius: 28px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 20px; 
 
    padding: 10px 20px 10px 20px; 
 
    text-decoration: none; 
 
} 
 
.btn:hover { 
 
    background: #3cb0fd; 
 
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db); 
 
    text-decoration: none; 
 
}

<a class="btn" href="http://survey.constantcontact.com/survey/a07eaydg1tyi98r263b/a0114ieuk39a5/greeting" target="_blank"> 
 
TAKE THE SURVEY HERE »</a>

來源

2016-02-28 05:58:31 Microsmsm

非常感謝！我沒有期待任何人花時間爲我寫這段代碼......真的，非常感謝。不幸的是，這段代碼並沒有創建我正在尋找的「按鈕」效果。所以，我猜這是不可能的。這對我來說很瘋狂。但是，謝謝你的回覆和幫助！ – Cassandra

用CSS按鈕打開一個新窗口

回答

相關問題