Search code examples
cssbuttontextpositioncss-position

How do I only apply css to text inside a button?

I have this

<button class="jumpButton">"Click me" <svg class="arrowsvg"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 10L12 15 17 10" aria-hidden="true"></path><svg><button>

I want to change the CSS of the "Click me" but changing that also changes the SVG.

.jumpButton #text {

}

That doesn't work. I cannot edit the HTML, I want to put the "Click me" to the right of the SVG. I also do not have access to Javascript.

Solution

  • You need to target the SVG and float it to the left

    svg {
  width: 20px;
  height: 20px;
  float: left;
}

button  {
  line-height:20px;
}
    <button class="jumpButton">"Click me" <svg class="arrowsvg"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 10L12 15 17 10" aria-hidden="true"></path><svg><button>