总结

我想在用户将鼠标悬停在按钮上时使用平滑的 CSS 动画/过渡向按钮文本添加右向双角引号 (»)。

问题

我想在鼠标悬停在按钮上时向按钮文本添加右向双角引号 (»)。这工作得很好，请参阅下面的我的代码。但是，当我将鼠标移到按钮上时，文本会“跳跃”，而不是平滑移动，尽管我添加了过渡。

https://www.w3schools.com/css/css3_buttons.asp上的动画按钮示例看起来不错，但对于具有多行文本的按钮效果不佳。

代码

您可以运行下面的代码片段。

html {
   font-family: Tahoma;
   margin: 0 5px 0 5px;
}

body {
   margin: 0;
}

.svgbutton {
   display: inline-block;
   border-radius: 4px;
   padding: 2px;
   width: 6em;
   box-shadow: 2px 2px 1px #efefef;
   color: black;
   border: 1px solid #dfdfdf;
   background-color: transparent;
   cursor: pointer;
   transition: 2s;
   vertical-align: top;
}

.svgbutton span {
   cursor: pointer;
   display: inline-block;
   border: thin solid red;
}

.svgbutton span::after {
   content: '';
   opacity: 0;
   border: thin solid blue;
}

.svgbutton:hover span {
}

.svgbutton:hover span::after {
   content: ' \00bb';
   opacity: 1;
   transition: 0.5s;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:red;stroke-width:0;"/>
      </svg><br />
   <span>Test</span>
</button>

<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:green;stroke-width:0;"/>
   </svg><br />
   <span>Test Test Test</span>
</button>

<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:blue;stroke-width:0;"/>
   </svg><br />
   <span>Test Test Test Test</span>
</button>
</p>
</body>
</html>

蓝色和红色框仅出于调试目的而插入。

怎样才能让文字移动流畅？任何提示都将受到高度赞赏。

接受答案后的最终代码

感谢Paulie_D的回答：对于每个有兴趣的人，请在这里找到我的最终代码：

https://jsfiddle.net/uqgd8bav/

1
投票

content

 无法转换，因此我建议将

width

 设置为零并转换为

1ch

 或您认为合适的任何内容。

html {
  font-family: Tahoma;
  margin: 0 5px 0 5px;
}

body {
  margin: 0;
}

.svgbutton {
  display: inline-block;
  border-radius: 4px;
  padding: 2px;
  width: 6em;
  box-shadow: 2px 2px 1px #efefef;
  color: black;
  border: 1px solid #dfdfdf;
  background-color: transparent;
  cursor: pointer;
  transition: 2s;
  vertical-align: top;
}

.svgbutton span {
  cursor: pointer;
  display: inline-block;
  border: thin solid red;
}

.svgbutton span::after {
  content: ' \00bb';
  opacity: 0;
  width: 0;
  display: inline-block;
  //border: thin solid blue;
}

.svgbutton:hover span {}

.svgbutton:hover span::after {
  content: ' \00bb';
  opacity: 1;
  transition: 0.5s;
  width: 1ch;
}

<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:red;stroke-width:0;"/>
      </svg><br />
   <span>Test</span>
</button>

<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:green;stroke-width:0;"/>
   </svg><br />
   <span>Test Test Test</span>
</button>

<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:blue;stroke-width:0;"/>
   </svg><br />
   <span>Test Test Test Test</span>
</button>

CSS 文本动画按钮/为悬停时的跨度内容文本添加 CSS 过渡

问题描述投票：0回答：1

总结

问题

1个回答

最新问题

CSS 文本动画按钮/为悬停时的跨度内容文本添加 CSS 过渡

问题描述 投票：0回答：1

总结

问题

1个回答

最新问题

问题描述投票：0回答：1