.cqbtn-1 {
background-color: #f27935;
}
.cqbtn-1 .round {
background-color: rgba(255,255,255,0.2);
}
.cqbtn-2 {
background-color: #00afd1;
}
.cqbtn-2 .round {
background-color: rgba(255,255,255,0.2);
}
.cqbtn-3 {
background-color: #5a5b5e;
}
.cqbtn-3 .round {
background-color: rgba(255,255,255,0.2);
}
.cqbtn-4 { background: #E14782;
}
.cqbtn-4 .round {
background-color: rgba(255,255,255,0.2);
}
.animatetype-3 .cqbtn-4 .round{
background-color: rgba(255,255,255,0.2);
}
.animatetype-4 .round{
-webkit-animation: pulse 2s ease-out;
animation: pulse 2s ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.cq-buttoncontainer a {
text-decoration: none;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
padding: 12px 53px 12px 23px;
color: #fff;   position: relative;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
display: inline-block;
} .cq-buttoncontainer a:visited{
color: #FFF;
}
.cq-buttoncontainer a span {
position: relative;
z-index: 3;
}
.cq-buttoncontainer a .round {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
width: 38px;
height: 38px;
position: absolute;
right: 3px;
top: 3px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
z-index: 2;
}
.cq-buttoncontainer.left a {
padding: 12px 23px 12px 53px;
}
.cq-buttoncontainer.left a .round {
left: 3px;
top: 3px;
}
.cq-buttoncontainer a .round i {
font-size: 18px;
position: absolute;
top: 50%;
margin-top: -9px;
left: 50%;
margin-left: -9px;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.cq-buttoncontainer .txt {
margin: 0;
padding: 0;
font-size: 14px;  line-height: 14px;
}
.animatetype-1 a:hover {
padding-left: 48px;
padding-right: 28px;
}
.animatetype-1 a:hover .round {
width: calc(100% - 6px);
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
.animatetype-1 a:hover .round i {
left: 12%;
}
.cq-buttoncontainer.left .animatetype-1 a:hover {
padding-right: 48px;
padding-left: 28px;
}
.cq-buttoncontainer.left .animatetype-1 a:hover .round i {
left: 88%;
}
.animatetype-2 a:hover .round {
background: none;
}
.animatetype-2 a:hover .round i {
left: 70%;
}
.animatetype-3 .round {
background: transparent;
}
.animatetype-3 a {
position: relative;
overflow: hidden;
}
.animatetype-3 a.cqbtn-1:after { background-color: rgba(255,255,255,0.2);
}
.animatetype-3 a.cqbtn-2:after { background-color: rgba(255,255,255,0.2);
}
.animatetype-3 a.cqbtn-3:after { background-color: rgba(255,255,255,0.2);
}
.animatetype-3 a:after {
content: "";
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
width: 37px;
height: 38px;
position: absolute;
right: 3px;
top: 3px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.animatetype-3 a:hover:after {
right: 100%;
width: 50%;
}
.animatetype-3 a:hover i {
margin-left: 4px;
}
.animatetype-3 a:hover .round{
background: transparent;
}
.cq-buttoncontainer.left a.cqbtn-3 i {
}
.cq-buttoncontainer.left .animatetype-3 a:after {
left: 3px;
}
.cq-buttoncontainer.left .animatetype-3 a:hover:after {
left: 100%;
width: 50%;
}
.cq-buttoncontainer.left .animatetype-3 a:hover i {
margin-right: 14px;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
50% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
75% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
25% {
-moz-transform: scale(0.8);
transform: scale(0.8);
}
50% {
-moz-transform: scale(0.7);
transform: scale(0.7);
}
75% {
-moz-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes pulse {
0% {
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
50% {
-ms-transform: scale(0.7);
transform: scale(0.7);
}
75% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-ms-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
25% {
transform: scale(0.8);
}
50% {
transform: scale(0.7);
}
75% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}