如果您希望始终吸引访客的注意力，那么请尝试这种脉冲式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;
}
