butonele[help]

[MzQ*]

sallz, a trecut ceva de cand n am mai scris pe aici
deci, am urmatoru BUTON

tot ok pe tema alba, nu i problema
dar cum pun o imagine background sau in general background simplu de orice culoare
apare asa

acuma as vrea sa stiu si eu va rog cum sa fie doar anume textu cum e in prima poza de alta culoare ca la background u alb

html | Afiseaza codul

<a id="header-button" href="https://www.extreamcs.com/forum" target="_blank"
        ><span>Click HERE2</span></a>

css | Afiseaza codul

#header-button {
  position: relative;
  display: inline-block;
  text-align: center;
  left: 50%;
  padding: 20px 20px;
  cursor: pointer;
  background: radial-gradient(
    circle,
    rgba(238, 174, 202, 0.7) 0%,
    rgba(148, 187, 233, 1) 100%
  );
  border-radius: 40px;
  border: none;
  font-size: 20px;
  width: 200px;
  transform: all 0.5s;
}

THx.
sunt abia iesit din ou ce tine de html ,css
am inceput pe w3s de cateva zile pe html da am zis sa experimentez orice design direct in css
EDIT: am nevoie de o simple lamurire sau vreun link catre ceva ca nu mai stiu deja cum sa caut pe gogu(parca nu s greu de cap)

[Mădălin]

https://jsfiddle.net/ps51e6ab/

[MzQ*]

Mersi, vad ca merge asa.
Dar cand bag si span, span after,hover le trec la two span sau header-button span?
ca am incercat si two span si header-button span dar imi da dupa nici un buton ,doar din html href u mi l afiseaza

| Afiseaza codul

.header-button {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 20px 20px;
  cursor: pointer;
  border-radius: 40px;
  border: none;
  font-size: 20px;
  width: 200px;
  text-decoration: none;
  left: 50%;
  transform: all 0.5s;
}

.two {
  background: radial-gradient(circle, rgb(163 33 167 / 70%) 0%, rgb(152 97 181) 100%);
  color: white;
}

.header-button span {
  appearance: auto;
  font-style: italic;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.header-button span::after {
  content: "\00bb";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.header-button:hover span {
  padding-right: 20px;
}

.header-button:hover span:after {
  opacity: 1;
  right: 0;
}

deja de 2 zile stau pe butoane , parca inteleg,inteleg si cand dau sa incerc :)) nu-mi merg cum trebuie