创建按钮，鼠标悬停在右侧显示的箭头上

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>

我希望箭头从元素外部从右侧进入（当它溢出时隐藏，然后一旦它在元素范围内可见）并在它很好地位于框内时固定，填充 5px从右边距。我仍然希望“悬停”左对齐。

非常感谢任何帮助，在此先感谢。

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 中使用（据我所知）。

因此您可以尝试在button 上使用:before 或将按钮更改为div。然后你可以直接在div 上使用:before，或者像现在一样在跨度上使用它

只需将您的箭头放置在您想要的位置即可。 （使用左右翻译等）

附：请不要使用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>