Кнопка «Создать» со стрелкой, расположенной над правой стороной

Question

Я хочу создать кнопку, которая будет отображать стрелку при наведении, но я хочу, чтобы эта стрелка входила справа и плавала прямо внутри кнопки независимо от ее размера.

Ниже приведеночего я добился до сих пор.

.button {
background-color: rgb(37,37,37);
background-image: none;
border-radius: 4px;
border: none;
color: #BEC4C9;
cursor: pointer;
display: block;
fill: none;
font-family: Arial;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 18.2px;
margin: 5px 1.4px 20px 0;
overflow: hidden;
padding: 5.6px 22.9071px 5.6px 14px;
text-align: left;
vertical-align: baseline;
width: auto;
}

.button span {
cursor: pointer; position: relative; transition: 0.5s;
}

.button span:after {
content: '\►'; position: absolute; opacity: 0; top: 0; right: 0; 
}

.button:hover span {
  padding-right: 23px; color: #ffffff;
}

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

.buttonAfter {
  background-color: rgb(37,37,37);
  background-image: none;
  border-radius: 4px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: block;
  fill: none;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  line-height: 18.2px;
  margin: 5px 1.4px 20px 0;
  overflow: hidden;
  padding: 5.6px 5px 5.6px 14px;
  text-align: left;
  transition: all 0.5s;
  vertical-align: baseline;
  width: 200px;
}

<button class="button" style="width: 200px;"><span>Hover 1</span></button>
<button class="button" style="width: 140px;"><span>Hover 2</span></button>

<DIV>
  I would like it to look something like the below after hovering
  <DIV class="buttonAfter">
    <SPAN style="float: left;"> Hover after </SPAN><SPAN style="float: right">►</SPAN>
  </DIV>
</DIV>

Я бы хотел, чтобы стрелка входила справа снаружи элемента (скрытая, когда она переполняется, а затем видимая, когда она находится в пределах границэлемент) и расположите его, как только он окажется внутри коробки, с отступом 5 пикселей от правого поля.Я все еще хочу, чтобы "Hover" был выровнен по левому краю.

Любая помощь с благодарностью получена, большое спасибо заранее.

Answer 1

Мне нравится использовать псевдоэлементы для подобных анимаций.Я добавил position:relative к кнопке и элемент: after равен position:absolute.Я установил элемент: after справа и прозрачный по умолчанию.Когда кнопка наведена, элемент: after перемещается туда, где указано и затухает.

Этот метод требует гораздо меньше кода, ширина кнопки никогда не имеет значения, и он дружествен к браузеру.Я надеюсь, что это полезно.

button{
background-color:black;
padding:.5em 1em;
color:white;
position:relative;
overflow:hidden;
}

button:after{
  content:'►';
  font-size:10px;
  color:white;
  position:absolute;
  top:.5em;
  right:-2em;
  opacity:0;
  transition:all .5s ease-in-out;
}

button:hover:after{
right:1em;
opacity:1;
}

<button class="button" style="width: 200px;">Hover 1</button>
<button class="button" style="width: 140px;">Hover 2</button>

Answer 2

Вам просто нужно сделать span равным по ширине с его родителем. Вы можете использовать display:block для этого на промежутке.

Также span не разрешено внутри button (насколько я знаю).

Таким образом, вы можете попробовать :before на button или изменить кнопку на div. Затем вы можете использовать :before на div напрямую или использовать его, как сейчас, на промежутке

Просто поместите свою стрелку тогда, как вы хотите. (используя левый правый перевод и т. д.)

P.S. пожалуйста, не используйте float для макета. И, пожалуйста, используйте css 'beautifiers' для организации вашего кода.

.button {
background-color: rgb(37,37,37);
background-image: none;
border-radius: 4px;
border: none;
color: #BEC4C9;
cursor: pointer;
display: block;
fill: none;
font-family: Arial;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 18.2px;
margin: 5px 1.4px 20px 0;
overflow: hidden;
padding: 5.6px 22.9071px 5.6px 14px;
text-align: left;
transition: all 0.5s;
vertical-align: baseline;
width: auto;
}

.button span {
cursor: pointer; position: relative; transition: 0.5s;
 width: 100%; display:block;
}

.button span:after {
content: '\►'; position: absolute; opacity: 0; top: 0; left: 0; transition: 0.5s;
}

.button:hover span {
  padding-right: 23px; color: #ffffff;
}

.button:hover span:after {
  opacity: 1;
  left: calc(100% - 23px);
}

.buttonAfter {
  background-color: rgb(37,37,37);
  background-image: none;
  border-radius: 4px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: block;
  fill: none;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  line-height: 18.2px;
  margin: 5px 1.4px 20px 0;
  overflow: hidden;
  padding: 5.6px 5px 5.6px 14px;
  text-align: left;
  transition: all 0.5s;
  vertical-align: baseline;
  width: 200px;
}

<div class="button" style="width: 200px;"><span>Hover 1</span></div>
<div class="button" style="width: 140px;"><span>Hover 2</span></div>

<div>
  I would like it to look something like the below after hovering
  <div class="buttonAfter">
    <span style="float: left;"> Hover after </span><span style="float: right">►</span>
  </div>
</div>