ホバー上に丸い形のスクエアボタン

Question

私はアクションボックスを設計しました。ホバーに丸みを帯びた形を追加することです。この形状は滑らかに滑り込む必要があります。誰にでもアイデアやこれをプログラムする方法がありますか？今の

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

感謝。

Arjan

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>

あなたはあなたの努力を表示するようにしてください。

これを参照してください。