How To Move Text To Left On Hover?

When the mouse cursor has hovered at the button, the text moves down, I need to move text only to the left by 5px, when hovering on the button, how to implement it?

Solution 1:

The "issue" you're facing is that the span element's display type is inline, so it will follow its siblings.

I suppose there are multiple ways to solve this.

You can add vertical-align: top; to the span. (Super simple css fix that preserves the HTML as it is. Downside: fixes text to top of element)

div {
  text-align: center;
}

span {
  vertical-align: top;
  margin-right: 10px;
}

button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div>
  <span>test</span><button>&#10230;</button>
</div>

To really fix this(Not flowing text to the top of the element), you would want to add a wrapper element outside the span:

.center {
  text-align: center;
}

span {
  margin-right: 10px;
}
.wrapper {
 display:inline-block;
}
button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div class="center">
  <p class="wrapper"><span>test</span></p><button>&#10230;</button>
</div>

You can also display the parent as flex and justify the children accordingly:

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  margin-right: 10px;
}

button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div class="flex">
  <div><span>test</span></div><button>&#10230;</button>
</div>