I would like the text to feature a dynamic background like the one on the border

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!

Answer №1

Bring the background forward over the text and apply the mix-blend-mode: screen; to it. Additionally, take note of 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Iterating over a column in a table to construct a text string

I'm currently working on a script to iterate through a table column and concatenate the values into a string. Here is what I have written so far: $(".ConvertSQL").click(function () { var values $(".TableQuery tr").each(function () ...

Prevent double-click selection functionality

In my code, I have a CSS class called .noselect that disables text selection using various browser-specific properties. However, I am now looking to modify it so that the text can still be selected, but not when the user double-clicks on it. Is there a wa ...

Visual element and form entry

I have a follow-up question regarding the same topic. How can I edit it to move up in the list or does that happen automatically? Now, onto the main question - I have an image and an input box both contained within a span, and I want to display them next ...

The background image in CSS fails to display when a relative path is utilized

Currently, I am working on a JavaFX project which has the following file structure (CEP serves as the root directory): CEP +img menu.jpg +src +css_files MainMenu.css The main objective is to set the background image from the img dir ...

What's the most effective method for setting up this header using the flex grid system?

I have been able to arrange the logo, search bar, and text in different columns, but I'm struggling to figure out how to position the <nav> below the search bar while maintaining the height consistency with the logo. #outer {} #logo { ...

Content does not display within a list element (ul)

I am attempting to display captions beneath the thumbnail slider in list format. However, the text is not appearing unless I switch the <ul> tag to <div>. You can locate the thumbnail here. It is the first thumbnail. Much appreciated. ...

Issue with Bootstrap table in IE11 due to Flex styling

There seems to be an issue with IE11 and Flexbox when using Bootstrap tables. My table row is set up like this: https://i.sstatic.net/iLoNS.png I have a table design that is scrollable to the right due to the numerous fields in it. The flex with column ...

Stop Duplicate Entries from Showing in Your Angular Project

In my application, there is a form that enables users to search for doctors based on the criteria they select from drop-down menus. Below is the structure of the form: https://i.sstatic.net/itguq.png When a user chooses a city and clicks the search butt ...

Steps for setting a background image behind radio buttons

I am currently facing a challenge in adding a background image to a div that contains some radio buttons and updating it dynamically with Angular based on the current page. app.controller('thingCtrl', function ($scope, $rootScope, $routeParams ...

Is it feasible in Angular2 to add CSS to a component using a service?

I have a component named A containing 5 images. Out of the 5, only one image is in color and clickable, while the remaining 4 are greyed out using the CSS class below: .not_opened{ -webkit-filter: grayscale(85%); } The greyscale images are not clickabl ...

Can you tell me where the slideshow is located in the Gantry position?

Currently, I am working with Gantry framework 4 on Joomla3.2 and have incorporated an Ice slideshow into my website. Despite trying different default positions, the image appears in place but fails to slide as intended. Interestingly, when I switch to the ...

Determining the repetition and placement of background images when employing multiple backgrounds

Is it possible to apply two background images to the same div? I want one image to repeat along the x-axis and the other to appear only once. I've tried using multiple background images, but I'm not sure how to target specific rules for each bac ...

Converting Malayalam Text to HTML Entities and Back in C#

Currently, I am facing a challenge in encoding/decoding characters from Arabic, Malayalam, and Bengali languages. I have successfully achieved it for Arabic characters using the System.Net.WebUtility.HtmlDecode(row["Context"].ToString()); method, but I a ...

Navigating through multiple overlapping scenes in Three.js using Orbit Controls

Seeking assistance with a dilemma involving the use of Orbit Controls with Multiple Overlapping Scenes. To showcase the issue, I made adjustments to the example found at multiple scenes and developed a test specific to my needs. The code can be accessed h ...

Datalist not displaying options in Chrome browser

I sent a server request to retrieve street names, expecting them to appear as options in a datalist. However, in Google Chrome, they did not display correctly. On the other hand, Firefox and IE showed the correct street names. Here is the code snippet: He ...

Incorporating a scroll bar into a horizontal display

In troubleshooting this web interface, I encountered an issue related to the horizontal view. The problem is evident in the image below - when in horizontal view, more vertical space is required, prompting the need for a scrollbar to be added between the ...

Screen JSON data by applying filters

In my current project, I am working on extracting data from a JSON file and presenting it to the user in a way that allows them to input values that match the expected data. My goal is to show different sections of the screen at different times. The initi ...

Guide to resizing and shifting to the right using CSS techniques

As a backend developer with experience in nodejs, I am diving into the world of web application development. HTML5 and CSS are new territories for me, but you can check out my small web application here. Now, I am looking to incorporate animations into my ...

Is it possible to hide one element and display another simultaneously using just CSS?

I came across a question with an answer regarding hiding and showing elements using CSS: CSS hide element, after 5 seconds show it However, my objective is to hide element a while simultaneously revealing element b. Please take a look at the code I am cu ...

Manipulating the .innerHTML property allows for selectively replacing sections

In my JavaScript code, I am trying to display a video along with a countdown timer. Once the countdown finishes, it should switch the content of the div to show a question. Below is my current implementation: <script type="text/javascript"> ...