我有一个圆形按钮,里面有一个加号图标。悬停时,圆圈会变成药丸形状。
我想实现两件事:
- 将鼠标悬停在左侧的加号图标。
- 文本(如阅读更多)从右侧淡入并同时停在药丸形状的中间。
我能够顺利地将圆圈动画化为药丸形状,但我无法控制加号图标(它移动到药丸形状的中间而不是向左移动)。我也不知道如何添加文本。
谢谢
.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>
最佳答案
请查看此代码段。
.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>
关于html - 使用 CSS 在悬停时将圆形加按钮设置为药丸形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49789597/