html - 使用 CSS 在悬停时将圆形加按钮设置为药丸形状

Question

我有一个圆形按钮，里面有一个加号图标。悬停时，圆圈会变成药丸形状。

我想实现两件事:

1. 将鼠标悬停在左侧的加号图标。
2. 文本(如阅读更多)从右侧淡入并同时停在药丸形状的中间。

我能够顺利地将圆圈动画化为药丸形状，但我无法控制加号图标(它移动到药丸形状的中间而不是向左移动)。我也不知道如何添加文本。

谢谢

    .My-circle-Button { width: 50px; height: 50px; border-radius: 25px; 
    background: none; transition: width .5s ease; color:#000; border: 4px solid 
    #000; }

    .My-circle-Button:after { content: "+"; font-size: 2.6em; line-height: 
    37px;}

    .My-circle-Button:hover { width: 240px;}

<button class="My-circle-Button"></button>

<button class="My-circle-Button"></button>

Answer 1

请查看此代码段。

.My-circle-Button { width: 50px; height: 50px; border-radius: 25px; 
background: none; transition: width .5s ease; color:#000; border: 4px solid 
#000; position: relative; padding-left: 30px; color: #000; overflow: hidden; text-align: center;}
.My-circle-Button span { white-space: nowrap; transition: all ease .3s; opacity: 0; font-size: 16px; line-height: 20px; transition: all ease .3s;}
.My-circle-Button:after { content: "+";
    font-size: 2.6em;
  height: 50px;
    left: 13px;
    position: absolute;
    top: 0;
    bottom: 0; }

.My-circle-Button:hover { width: 240px;}
.My-circle-Button:hover span{ opacity: 1; transition-delay:.3s;  transition: all ease .3s; }

<button class="My-circle-Button"><span>Read More</span></button>