Border 35
.create-button {
font-family: monospace;
font-weight: bold;
text-transform: uppercase;
background: #000;
color: #fff;
border: none;
border-radius: 0;
position: absolute;
left: 50%;
top: 50%;
position: relative;
transform: translate(-50%,-50%);
border-radius: 3px;
cursor: pointer;
padding: 0.8em 1.6em;
font-size: 18px;
overflow: hidden;
&:focus, &:active {
outline: none;
}
&:before, &:after {
content: '';
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
height: auto;
width: auto;
z-index: -1;
border-radius: inherit;
background: inherit;
}
&:before {
background: linear-gradient(90deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
background-size: 200% 200%;
}
&:after {
margin: 3px;
}
&:hover:before, &:focus:before {
animation: rainbow-border 1.5s linear infinite
}
}
@keyframes rainbow-border {
0% { background-position: 0% 50% }
100% { background-position: 200% 50% }
}
No comments