Html 使用CSS将圆形加号按钮设置为悬停时的药丸形状

我有一个圆形按钮，里面有一个加号图标。悬停时，圆将设置为丸状

我想实现两件事：

悬停时向左移动加号图标

文本（如多读）从右边淡入，同时停在药丸形状的中间。 我能够将圆平滑地设置为药丸形状，但我无法控制加号图标（它移动到药丸形状的中间，而不是向左）。我也不知道如何添加文本

谢谢

.My circle按钮{宽度：50px；高度：50px；边框半径：25px；
背景：无；过渡：宽度。5s宽；颜色：#000；边框：4倍实心
#000; }
.My circle按钮：{内容：“+”，字体大小：2.6em；行高：
37px；}
.My circle按钮：悬停{宽度：240px；}

---

请查看此片段

.My circle按钮{宽度：50px；高度：50px；边框半径：25px；
背景：无；过渡：宽度。5s宽；颜色：#000；边框：4倍实心
#000；位置：相对；左侧填充：30px；颜色：#000；溢出：隐藏；文本对齐：居中；}
.My circle按钮span{空白：nowrap；过渡：所有ease.3s；不透明度：0；字体大小：16px；线条高度：20px；过渡：所有ease.3s；}
.My circle按钮：{内容：“+”；
字号：2.6em；
高度：50px；
左：13px；
位置：绝对位置；
排名：0；
底部：0；}
.My circle按钮：悬停{宽度：240px；}
.My circle按钮：悬停span{opacity:1；转换延迟：.3s；转换：全部轻松.3s；}

---

阅读更多

请查看此片段

.My circle按钮{宽度：50px；高度：50px；边框半径：25px；
背景：无；过渡：宽度。5s宽；颜色：#000；边框：4倍实心
#000；位置：相对；左侧填充：30px；颜色：#000；溢出：隐藏；文本对齐：居中；}
.My circle按钮span{空白：nowrap；过渡：所有ease.3s；不透明度：0；字体大小：16px；线条高度：20px；过渡：所有ease.3s；}
.My circle按钮：{内容：“+”；
字号：2.6em；
高度：50px；
左：13px；
位置：绝对位置；
排名：0；
底部：0；}
.My circle按钮：悬停{宽度：240px；}
.My circle按钮：悬停span{opacity:1；转换延迟：.3s；转换：全部轻松.3s；}

---

阅读更多

您可以使用

:after

和

:before

伪元素，并使用

绝对

位置对齐左侧的

+

符号。我还没有完全做到你想要的，但这将给你关于如何进一步的想法。请看片段

.My circle按钮{宽度：50px；高度：50px；边框半径：25px；
背景：无；过渡：宽度。5s宽；颜色：#000；边框：4倍实心
#000；位置：相对；}
.My circle按钮：在{内容：“+”，字体大小：2.6em；行高：37px；位置：绝对；顶部：3px；左侧：11px；}
.My circle按钮：悬停{宽度：240px；位置：相对；}
.My circle按钮：悬停在{content:“read more”；字体大小：1.5em；行高：37px；位置：绝对；右侧：60px；顶部：2px；}

---

您可以使用

:after

和

:before

伪元素，并使用

绝对位置对齐左侧的
+
符号。我还没有完全做到你想要的，但这将给你关于如何进一步的想法。请看片段


.My circle按钮{宽度：50px；高度：50px；边框半径：25px；
背景：无；过渡：宽度。5s宽；颜色：#000；边框：4倍实心
#000；位置：相对；}
.My circle按钮：在{内容：“+”，字体大小：2.6em；行高：37px；位置：绝对；顶部：3px；左侧：11px；}
.My circle按钮：悬停{宽度：240px；位置：相对；}
.My circle按钮：悬停在{content:“read more”；字体大小：1.5em；行高：37px；位置：绝对；右侧：60px；顶部：2px；}
你好，安莫尔，非常感谢你的回答，我想就是这个了！：）感谢你的帮助。@AshSami很高兴它帮助了你。请别忘了标记我的答案并投票：-）我不知道怎么做（我是新来的），但我会找到并做Anmol:）和我做的差不多你好Anmol，非常感谢你的回答，我想就是这个了！：）感谢你的帮助。@AshSami很高兴它帮助了你。请别忘了标记我的答案并投票：-）我不知道怎么做（我是新来的），但我会找到并做一个简单的：）和我做的差不多你好，苏雷什，非常感谢你的回答：）感谢你的帮助你好，苏雷什，非常感谢你的回答：）感谢你的帮助