html - css动画展开按钮内容

Question

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

what I want to achieve

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

也许是这样的:

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

和CSS:

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

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

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

谢谢，

啊。

Answer 1

首先，你不应该使用 50% 的 border-radius，当宽度大于它的高度时会形成一个椭圆，你应该使用固定的值，例如 30px。

其次，你不应该固定height和width，你应该设置padding，这样文本就不会跑出来了按钮。

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

在代码中，我使用了 :after，它在 :hover 上的“H”之后添加了“ello”。

button {
   padding: 15px;
   border-radius: 30px;
}

button:hover:after {
    content: "ello";
}

<button>H</button>