如果您希望始终吸引访客的注意力，那么请尝试这种脉冲式cta设计。它通过css使用延迟来创建具有外部发光的重复脉冲动画。
但是如果你深入研究css代码，你可以将脉冲动画改为你喜欢的任何东西。它非常通用，当然，它应该与任何设计完美融合。
此外，如果单击角落中的“x”图标，您将再次看到完整的动画效果。这会将按钮与窗口一起加载到视图中，因此它甚至可以为第一个页面加载提供很酷的动画。
现在大多数网站都使用纯css按钮，所以找到你喜欢的并不是那么困难，并且克隆代码以获得kick-ass cta。
<section>
<div class="wrapper">
<a class="close">x</a>
<h1>is this annoying?</h1>
i wonder if having a pulsing button will entice people to click that little bit more.
<button>go on, click me.</button>
</div>
</section>
//variables
$light-grey: #434343;
$dark-grey: #212121;
$blue:#00adee;
$margin-bottom: 25px;
// body styling
html{
height:100%;
}
body{
display:flex;
justify-content:center;
align-items:center;
font-family: 'source sans pro', sans-serif;
font-weight: 400;
background: linear-gradient($light-grey, $dark-grey);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
body *{
box-sizing:border-box;
}
section{
display: flex;
flex: 0 500px;
}
.wrapper{
position:relative;
display:flex;
flex-flow:column;
flex:1;
padding:40px;
margin:15px;
border-radius:10px;
background:#fff;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
transition:all 0.4s linear;
&:hover{
box-shadow: 0px 8px 200px rgba(0, 0, 0, 1);
}
}
.close {
position:absolute;
top:-10px;
right:-10px;
display:flex;
align-items:center;
justify-content:center;
background:#000;
color:white;
width:30px;
height:30px;
border-radius:50%;
text-decoration:none;
transition:all 0.4s linear;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
&:hover{
background:$blue;
}
}
h1 {
font-size:36px;
font-weight:700;
margin-bottom:$margin-bottom;
line-height:1.2;
}
h2 {
font-size:20px;
font-weight:700;
margin-bottom:$margin-bottom;
}
p{
line-height:1.5;
margin-bottom:$margin-bottom;
}
button {
display:flex;
justify-content:center;
background:$blue;
color:white;
border:none;
margin-bottom:$margin-bottom;
padding:15px;
font-weight:700;
font-size:14px;
border-radius:5px;
transition:all 0.4s linear;
cursor: pointer;
&:hover{
background:darken($blue, 20%);
}
}
.email-capture{
display:flex;
button{
padding:0px 20px;
}
input{
flex:1;
padding:0 0 0 20px;
margin:0;
border:none;
height:40px;
background:#eee;
border-radius:2px;
}
}
//animations
$easeoutcust:cubic-bezier(.03,.16,.39,0.99);
$easeinquad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$easeoutback: cubic-bezier(0.175, 0.885, 0.320, 1.275);
$globaldelay: .8; //just so we can see what's going on even when codepen refreshes funny
@keyframes slidein {
from {transform:translatey(400px);}
to {transform:translatey(0);}
}
@keyframes fadein {
from {opacity:0;}
to{ opaticy: 1;}
}
@keyframes slidedown {
from {transform: translatey(-120px);}
to {transform: translatey(0);}
}
@keyframes slideinshort {
from {transform:translatey(80px);}
to {transform:translatey(0);}
}
@keyframes blink {
0% { box-shadow: 0 0 25px $blue; }
50% { box-shadow: none; }
}
section {
animation:
slidein .65s $globaldelay+0s $easeoutback both,
fadein 0.25s $globaldelay+0s $easeinquad both;
}
button {
animation: slidedown 0.7s $globaldelay+.35s $easeoutcust both,
fadein .2s $globaldelay+.3s $easeinquad both, blink 2.0s linear infinite;
}
h1, h2 {
animation:
slideinshort 0.25s $globaldelay+.25s $easeoutcust both,
fadein 0.1s $globaldelay+.2s $easeinquad both;
}
p, .email-capture, .close {
animation:
slideinshort 0.25s $globaldelay+.3s $easeoutcust both,
fadein 0.1s $globaldelay+.25s $easeinquad both;
}