<div class="newsletter-demo">
<h3>
Join the newsletter.
</h3>
<p>
Useful tech tips, directly to your inbox. <br> No spam, unsubscribe at any time.
</p>
<div class="animated-link-wrapper-demo">
<div class="animated-link-effect-demo">
<div></div>
</div>
<a
href="https://markodenic.com/go/newsletter/"
target="_blank"
rel="noopener nofollow"
class="animated-link-demo"
>
Subscribe
</a>
</div>
</div>
.newsletter-demo {
padding: 20px;
text-align: center;
max-width: 400px;
margin: 15px auto;
background: #070709;
color: #fff;
border-radius: 16px;
transition: color .2s;
border: 1px solid #16181d;
}
.animated-link-wrapper-demo {
display: inline-block;
position: relative;
}
.newsletter-demo p {
padding-bottom: 15px;
}
.animated-link-demo {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
cursor: pointer;
width: 100%;
min-width: 200px;
outline: 2px solid transparent;
outline-offset: 2px;
padding: 5px 10px;
height: 3rem;
border-radius: 6px;
background: #141518;
color: #fff;
}
/* Conic gradient */
.animated-link-effect-demo {
pointer-events: none;
border-radius: 6px;
width: calc(100% - 1px);
height: calc(100% - 1px);
position: absolute;
padding: 1px;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: exclude;
mask-composite: exclude;
-webkit-mask-composite: xor;
}
.animated-link-effect-demo div {
background-image: conic-gradient(from 0 at 50% 50%, rgba(255, 255, 255, .5) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 310deg, rgba(255, 255, 255, .5) 360deg);
position: relative;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
animation: rotate-demo 2s linear infinite;
aspect-ratio: 1;
}
@keyframes rotate-demo {
from {
transform: translate(-50%, -50%) scale(1.4) rotate(0turn);
}
to {
transform: translate(-50%, -50%) scale(1.4) rotate(1turn);
}
}