.btn{
color:#fff;
background: #173356;
font-family:'Archivo', sans-serif;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
padding: 10px 15px;
border-radius: 2px;
border: none;
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.5s ease 0s;
}
.btn:focus,
.btn:hover{
color:#fff;
background-color: #0e4383;
border-radius: 30px;
box-shadow: -3px -3px 0 #fff, -4px -4px 0 #0e4383;
}
.btn:before,
.btn:after,
.btn span:before{
content: "";
background: #fff;
width: 2px;
height: 2px;
box-shadow: 30px 20px 0px #fff,40px 60px 0px #fff,40px 60px 0px #fff,
80px 50px 0px #fff,120px 20px 0px #fff,110px 60px 0px #fff,
120px 5px 0px #fff,200px 5px 0px #fff,210px 25px 0px #fff,
230px 50px 0px #fff,170px 90px 0px #fff,190px 74px 0px #fff,
140px 80px 0px #fff,20px 90px 0px #fff,40px 760px 0px #fff,
60px 70px 0px #fff,80px 80px 0px #fff,160px 20px 0px #fff;
border-radius: 50%;
opacity: 0.1;
position: absolute;
top: 30px;
left: 5px;
z-index: 2;
}
.btn:after{
height: 3px;
width: 3px;
box-shadow: 60px 5px 0px #fff,40px 30px 0px #fff,10px 40px 0px #fff,
90px 40px 0px #fff,100px 10px 0px #fff,110px 5px 0px #fff,
7px 20px 0px #fff,200px 50px 0px #fff,180px 80px 0px #fff,190px 15px 0px #fff;
top: -30px;
animation-delay: 0.5s;
}
.btn span:before{
height: 1px ;
width: 1px;
box-shadow: 30px 10px 0px #fff,80px -20px 0px #fff,120px 10px 0px #fff,
12px 50px 0px #fff,25px 190px 0px #fff,65px 840px 0px #fff,
125px 70px 0px #fff,160px 20px 0px #fff,160px -7px 0px #fff,
200px -18px 0px #fff,225px -38px 0px #fff,240px -40px 0px #fff;
top: 25px;
animation-delay: 0.9s;
}
.btn:hover:before,
.btn:hover:after,
.btn span:before{
animation: twinkle 1s infinite;
}
@keyframes twinkle{
50%{ opacity: 1; }
}
@media only screen and (max-width: 767px){
.btn{ margin-bottom: 30px; }
}
