I want the text to have the same animated background as the border
I'm trying to give the same border animation to the text, but I don't know how to do it, and I don't know if it is possible. I want to know if you have an idea for this. Thanks for answers!
.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!
+3
source to share
1 answer
Place a background in front of the text and use mix-blend-mode: screen;
. Also notice the black borders on the outer container.
.rainbow {
position: absolute;
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
z-index: 1;
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;
mix-blend-mode: screen;
pointer-events: none; /** if you want the text to be selectable **/
}
.bottone {
display: inline-block;
position: relative;
padding-top: 15px;
text-align: center;
font-family: sans-serif;
width: 200px;
height: 35px;
border: 3px solid black;
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%
}
}
<a class="bottone">
Text
<div class="rainbow"></div>
</a>
+3
source to share