Question

有谁能告诉我用什么代码将CSS按钮打开到新窗口？我看到为我网站上的超链接执行此操作的代码是：target="_blank"。但是，我无法弄清楚如何将此代码与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>

在哪里可以在我的CSS代码中插入target="_blank"代码来创建相同的＆＃34;新窗口＆＃34;我能用超链接创建的效果吗？

谢谢，谢谢!!!

卡桑德拉

Answer 1

你不能做你想要达到的目标。您实际上只能用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; 
}

Answer 2

试试这个。只需复制，粘贴并运行它。

＆＃13;

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

＆＃13;

Answer 3

我在这里给你一个很好的按钮： 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>

使用CSS按钮打开一个新窗口

3 个答案: