CODEWITHSUNDEEP
htmlcss
Lafa
Lafa

Reputation: 523

I want the text to have the same animated background as that of the border

I'm trying to give to the text the same animation of the border, 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. Thank you for the 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>

Thank you very much!

Upvotes: 3

Views: 103

Answers (1)

Ori Drori
Ori Drori

Reputation: 192317

Put the background in front of the text, and use mix-blend-mode: screen; on it. Also note 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>

Upvotes: 3

Related Questions