.dcp-hsn-btn {
padding: 14px 20px;
display: block; 
justify-content: center;
align-items: center; color: #fff;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
line-height: normal;
text-decoration: none;
border: 2px solid transparent;
position: relative;
width: 60%;
max-width: 800px;
margin: 14px auto;
font-size: 16px;
text-align: center;
}
.dcp-hsn-btn:hover {
text-decoration: none;
color: #fff;
} .dcp-hsn-btn-bound {
animation: hsnboundbtn 3s ease-out 0s infinite; }
@keyframes hsnboundbtn {
0%, 10%, 20%, 100% {transform: translateY(0%);}
5%, 15% {transform: translateY(-0.7em);} } @keyframes hsnblinkbtn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.dcp-hsn-btn-blink {
animation: hsnblinkbtn 1s ease-in-out infinite alternate;
} .dcp-hsn-btn-light::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #b5e7ff;
transition: 0.3s;
animation: hsnlightbtn 2.5s ease-in-out infinite;   
}
.dcp-hsn-btn-light {
overflow: hidden;
transition: 0.3ms;
}
@keyframes hsnlightbtn {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { transform: scale(5) rotate(45deg); opacity: 1; }
100% {transform: scale(100) rotate(45deg); opacity: 0; }
}  .dcp-hsn-btn-sway {
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-duration:1s;
animation-name: hsnswaybtn;
}
@keyframes hsnswaybtn {
0%{ transform:rotate(0deg);}
25%{ transform:rotate(1deg);}
50%{ transform:rotate(0deg);}
75%{ transform:rotate(-1deg);}
100%{ transform:rotate(0deg);}
} .dcp-hsn-btn-zooming {
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-name: hsnzoomingbtn;
animation-duration:1.3s;
}
@keyframes hsnzoomingbtn {
0%{ transform:scale(0.91);}
40%{ transform:scale(1.05);}
60%{ transform:scale(0.85);}
80%{ transform:scale(1);}
100%{ transform:scale(0.91);}
} .dcp-hsn-btn-trembling {
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-duration:3s;
animation-name: hsntremblingbtn;
}  
@keyframes hsntremblingbtn {
3% {transform: translateX(3px) rotate(2deg);}
6% {transform: translateX(-3px) rotate(-2deg);}
9% {transform: translateX(3px) rotate(2deg);}
12% {transform: translateX(-3px) rotate(-2deg);}
15% {transform: translateX(2px) rotate(1deg);}
18% {transform: translateX(-2px) rotate(-1deg);}
21% {transform: translateX(2px) rotate(1deg);}
24% {transform: translateX(-2px) rotate(-1deg);}
27% {transform: translateX(1px) rotate(0);}
30% {transform: translateX(-1px) rotate(0);}
} .dcp-hsn-btn-jump {
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-name: hsnjumpbtn;
animation-duration:1.4s;
}
@keyframes hsnjumpbtn {
0%{ transform:translateY(0) scale(1.0); bottom:0;}
20%{ transform:translateY(0) scale(1.0);bottom: 6px;}
30%{ transform:translateY(-15%) scale(1.1);bottom: 7px;}
40%{ transform:translateY(0%) scale(1.0);bottom: 7px;}
50%{ transform:translateY(-15%) scale(1.2);bottom: 15px;}
70%{ transform:translateY(0%) scale(1.0); bottom: 7px;}
80%{ transform:translateY(-15%) scale(1.1); bottom: 7px;}
90%{ transform:translateY(0%) scale(1.0); bottom:6px;}
100%{ transform:translateY(0) scale(1.0); bottom:0;}
} .dcp-hsn-btn-wave {
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:0;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-name: hsnwavebtn;
animation-duration:1s;
}
@keyframes hsnwavebtn {
0%{ transform:scale(0.9);box-shadow: 0 0 0 1px;opacity:0;}
50%{ transform:scale(1);box-shadow: 0 0 0 10px;opacity:0.5;}
100%{ transform:scale(1.1);box-shadow: 0 0 0 20px;opacity:0;}
} .dcp-hsn-btn-ripples::before, .dcp-hsn-btn-ripples::after  {
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:0;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-name: hsnripplesbtn;
animation-duration:2s;
}
.dcp-hsn-btn-ripples::after  {
animation-delay: 0.5s;
}  
@keyframes hsnripplesbtn {
0%{ transform:scale(1,1);box-shadow: 0 0 0 3px;opacity:1;}
100%{ transform:scale(1.2,2);box-shadow: 0 0 0 3px;opacity:0;}
}
.arrow-clippath {
position: relative;
display: inline-block;
width: 120px;
height: 120px;    
clip-path: polygon(25% 60%, 25% 0, 75% 0, 75% 60%, 100% 60%, 50% 100%, 0 60%);
animation: hsnboundbtn 3s ease-out 0s infinite; }