用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按钮打开一个新窗口

回答

相关问题