悬停时有方圆按钮的圆形按钮

Question

我设计了一个号召性用语框。这个想法是添加一个圆形的形状。这个形状需要顺利滑入。有没有人有一个想法或例子如何编程？

Normal state on the left. On the right the hover state.

谢谢了。

阿尔扬

Answer 1

.square{ 
 
    background: #bc82ff; 
 
    width: 200px; 
 
    height: 200px; 
 
    padding: 20px; 
 
    color: white; 
 
    word-break: break-all; 
 
    position: relative; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
} 
 
.square > p{ 
 
    color: white; 
 
    position: relative; 
 
} 
 

 
.circle{ 
 
    position: absolute; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 100%; 
 
    background: #a672e9; 
 
    bottom: 100%; 
 
    left: -30px; 
 
    transition: bottom 0.5s; 
 

 
} 
 
.square:hover > .circle{ 
 
    bottom: 20px; 
 
}

<div class="square"> 
 
    <span class="circle"></span> 
 
    <p>12312312312312312321321312321</p> 
 
</div>

你应该尽量表现你的努力。

参照这个。