[分享]css3按钮圆形扩大

CSS3可以实现很多炫酷的效果，比如按钮圆形扩大效果。通过CSS3的transition和transform属性，我们可以轻松地实现这个效果。

.button{
  width: 100px;
  height: 100px;
  background-color: #FF4081;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover{
  transform: scale(1.2);
  box-shadow: 0 0 30px rgba(0,0,0,0.3);
} 

上面的代码中，我们首先定义了一个class为.button的元素，设置了元素的宽、高、圆角、背景颜色、字体颜色等属性。其中特别要注意的是，我们给元素设置了transition属性，表示该元素的属性变化需要进行动画效果，同时设置了动画的时间、过渡方式等参数。

当鼠标悬停在该元素上时，我们通过:hover伪类来控制该元素的状态。我们使用了transform属性来实现元素的缩放效果，并且给元素添加了一个阴影效果，使得该元素看上去更加立体。

通过上面的代码，我们可以实现一个圆形扩大的按钮效果，这样的效果在网页设计中非常的常见，能够极大地提升用户体验。