Question

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

我想实现两件事：

悬停时将加号图标移到左侧。
文字（如同阅读更多）从右边淡入，同时停在药丸形状的中间。

我能够将圆形动画设置为药丸形状，但是我无法控制加号图标（它移动到药丸形状的中间而不是向左移动）。我也无法弄清楚如何添加文字。

由于

    .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

请查看此片段。

＆＃13;

.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; }

＆＃13;

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

＆＃13;

Answer 2

您可以使用:after和:before伪元素，并使用absolute位置对齐左侧的+符号。我没有完全按照你想要的那样做，但这会让你了解如何更进一步。看一下片段。

.My-circle-Button { width: 50px; height: 50px; border-radius: 25px; 
background: none; transition: width .5s ease; color:#000; border: 4px solid 
#000;  position:relative; }

.My-circle-Button:before { content: "+"; font-size: 2.6em; line-height: 37px; position:absolute; top:3px; left:11px;}


.My-circle-Button:hover { width: 240px; position:relative; }
.My-circle-Button:hover:after { content: "read more"; font-size: 1.5em; line-height: 37px; position:absolute; right:60px; top:2px;}

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

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

2 个答案: