圆形的方形按钮悬停

Question

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

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

谢谢你。

阿尔扬

Answer 1

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

你应该试着展示你的努力。

请参阅此内容。