How to move text to left on hover?

Question

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?

 div { text-align: 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> <span>test</span><button>&#10230;</button> </div> 

Answer 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>