懸停時有方圓按鈕的圓形按鈕

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>

你應該儘量表現你的努力。

參照這個。