CSS Button Style into Text Style - html

Question

I'm using this piece of CSS to style a button.
Is there any way to also style text with it?
Without losing any of the effects?
The button I'm referring to: (#1)
https://webdeasy.de/en/top-css-buttons-en/
.drts-bs-btn-outline-primary {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.drts-bs-btn-outline-primary:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.drts-bs-btn-outline-primary:active {
color: #000
}
.drts-bs-btn-outline-primary:active:after {
background: transparent;
}
.drts-bs-btn-outline-primary:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
<button class="drts-bs-btn-outline-primary" type="button">HOVER ME, THEN CLICK ME!</button>
Can't find a solution for this

Answer 1

One option could be to overwrite the default style using !important. Follow the link to learn more.
button {
font-size: 2em;
color: green!important;
}
.drts-bs-btn-outline-primary {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.drts-bs-btn-outline-primary:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.drts-bs-btn-outline-primary:active {
color: #000
}
.drts-bs-btn-outline-primary:active:after {
background: transparent;
}
.drts-bs-btn-outline-primary:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
<button class="drts-bs-btn-outline-primary" type="button">HOVER ME, THEN CLICK ME!</button>