I'm trying to achieve the same animated border effect for my text, but I'm not sure how to do it or if it's even possible. Do you have any ideas on how this can be done? Thank you for your insights!
.rainbow {
position: absolute;
top: 4px;
left: 4px;
width: 214px;
height: 64px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
-webkit-animation: rainbow 7s ease infinite;
-z-animation: rainbow 7s ease infinite;
-o-animation: rainbow 7s ease infinite;
animation: rainbow 7s ease infinite;
}
.bottone {
position: absolute;
z-index: 999;
padding-top: 15px;
text-align: center;
font-family: sans-serif;
width: 200px;
height: 35px;
border: 3px solid transparent;
background: white;
}
@-webkit-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
<div class="rainbow"></div>
<a class="bottone">Text</a>
Many thanks in advance!