.dangan-action-btn {
padding: 14px 20px;
display: block; 
justify-content: center;
align-items: center;
background-color: #F6D21F; 
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;
}
.dangan-action-btn:hover {
text-decoration: none;
color: #fff;
} .dangan-btn-costom-bound .btn{
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;}
}
.dangan-btn-costom-blink .btn{
animation: hsnblinkbtn 1s ease-in-out infinite alternate;
} .dangan-btn-costom-sway .btn{
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);}
} .dangan-btn-costom-zooming .btn{
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);}
} .dangan-btn-costom-trembling .btn{
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);}
} .dangan-btn-costom-jump .btn{
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;}
}