Html css动画展开按钮内容

如何使用css创建这样的按钮动画

我只想显示按钮的第一个字母，悬停时它会展开并显示其余的字母

可能是这样的：

<button>h<span>ello</span></button>

但是当我改变宽度时，它看起来像一个拉伸的圆，因为半径。修改宽度但保持相同边界半径的最佳方法是什么

谢谢

---

啊。

首先，您不应该使用50%的边界半径，当宽度大于其高度时，这将形成椭圆形，您应该使用固定值，例如30px

其次，你不应该固定高度和宽度，你应该设置填充，这样文本就不会超出按钮

第三，要更改内容，可以使用content属性

在代码中，我使用了：after，它在H on:hover之后添加了ello

钮扣{ 填充：15px； 边界半径：30px； } 按钮：悬停：之后{ 内容：ello； } H我建议使用来显示按钮标签的其余部分，而不是使用嵌套的。您将希望用于平滑悬停动画。我将：after选择器与转换组合在一起，并将：hover opacity设置为1，以便在按钮展开时同时显示按钮文本

钮扣{ 宽度：50px； 高度：50px； 边界半径：10px； 填充：6px； 背景色：黑色； 颜色：白色； 字号：1.03em； 盒影：3px 3px红色； } 按钮：悬停{ 宽度：100px； 高度：50px； 边界半径：10px； 填充：6px； 背景色：黑色； 颜色：白色； 转换：所有0.4s到0； 字号：1.02em； 盒影：3px 3px蓝色； } 按钮跨度{ 不透明度：0； } 按钮：悬停范围{ 不透明度：1； 转换：所有0.3秒到0秒； } 按钮：悬停范围：之后{ 内容：ello！； } 可以在px、em或rem中定义边界半径值。使用%将创建椭圆

通过使用：：first-letter属性，可以避免附加标记

例如

钮扣{ 背景：黑色； 颜色：透明； 字体大小：3rem； 边界：0； 边界半径：2.5雷姆； 宽度：5雷姆； 身高：5雷姆； 填充物：5雷姆1.5雷姆； } 按钮：第一个字母{ 颜色：白色； } 按钮：悬停{ 宽度：自动； 颜色：白色； }

---

Hello下面的：hover标记的简单用法/

CSS:

HTML:

---

看来我还有很多东西要学：谢谢你的帮助！对不起，如果我使用：在我如何使用css转换使其平滑之后？谢谢Tanner的帮助，很酷的代码片段，我将窃取它：您好，您的示例非常好，但是当您将其悬停时，我可以看到第一个字母中有一个小跳跃，这是因为填充？@Adbullah。不，您是傻瓜，这是因为文本对齐，如果我把它左对齐并用填充物播放，它看起来很漂亮：我看到你把宽度从50像素改为100像素，但是如果按钮中的文本是动态的，我就不知道文本的长度了。谢谢你的洞察力！，我不知道那个选择器，直到。

button {
   width: 40px;
   height: 40px;
   border-radius: 50%;
}

button span {
   display: none: /* maybe hide it first? */
}

.button {
  background-color: pink;
}

.button:hover {
  background-color: blue;
}

<h3 class="button"> Hello, World! </h3>