<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<a href="https://melbournedesigncollective.com" target="_blank"><span>button</span></a>
</div>
</body>
</html>@import url('https://fonts.googleapis.com/css?family=Raleway:200');
a {
display: block;
width: 220px;
height: 70px;
z-index: 1;
}
a:after {
content: '';
background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
background-size: 400% 400%;
-webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
-webkit-animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
}
a>span {
display: block;
background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
background-size: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-animation: gradient 3s ease-in-out infinite;
-webkit-animation: gradient 3s ease-in-out infinite;
animation: gradient 3s ease-in-out infinite;
}
/* helpers */
.absolute-centering, body:after, a, a:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.text-formatting, a {
text-transform: uppercase;
text-decoration: none;
text-align: center;
letter-spacing: 2px;
line-height: 70px;
font-family: 'raleway';
font-size: 28px;
}
/* motion */
@-moz-keyframes gradient {
0% {
background-position: 14% 0%;
}
50% {
background-position: 87% 100%;
}
100% {
background-position: 14% 0%;
}
}
@-webkit-keyframes gradient {
0% {
background-position: 14% 0%;
}
50% {
background-position: 87% 100%;
}
100% {
background-position: 14% 0%;
}
}
@keyframes gradient {
0% {
background-position: 14% 0%;
}
50% {
background-position: 87% 100%;
}
100% {
background-position: 14% 0%;
}
}
External CSS
This Pen doesn't use any external CSS resources.