호버의 둥근 모양이있는 사각 버튼

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>

당신은 당신의 노력을 보여주기 위해 시도해야합니다.

참조하십시오.