纯CSS3实现3D浮动按钮

纯CSS3实现3D浮动按钮纯CSS3实现3D浮动按钮是一款效果很酷的纯CSS3 3D浮动按钮，按钮是一个3D立体的悬浮圆形，按钮上面可以是文字和爱心图案，按钮底部还有阴影效果，显得很立体。另外，当把鼠标滑过按钮时，按钮就会下陷，就像在水面上下沉一样。CSS33D效果浮动按钮CSS3按钮

<style>
html
{
  margin: 0;
  padding: 0;
  height: 100%;
}
body
{
  margin: 0;
  


padding: 100px 0px 0px 0px;
  height: 100%;
  background-color: #fff;
  box-shadow: 0px 0px 


80px #000 inset;  
}
#pbtn
{
  width: 400px;
  height: 200px;
  background-color: 


#ccf;
  margin: 0px auto 0px auto;
  text-align: center;


  border-radius: 200px / 100px;


  


box-shadow: 
    0px -15px 15px #88f inset,
    10px -15px 15px #44f inset,
    -10px -15px 


15px #fff inset,
    -0px 15px #88f,
    -35px 40px 5px rgba(0,0,0,0.5);


  transition: 
    


box-shadow .25s linear,
    margin-top .25s linear;


  color: #88f;
  font-size: 100px;
}


#pbtn:hover
{
  box-shadow: 
    0px -15px 15px #88f inset,
    10px -15px 15px #44f inset,
    


-10px -15px 15px #fff inset,
    -0px 2px #88f,
    -7px 12px 5px rgba(0,0,0,0.5);
  margin-


top: 15px;
}


#btnlabel
{
  padding-top: 0px;
  line-height: 100px;
  text-shadow: 3px -3px 1px 


#44f, -3px 3px 1px #fff;
  transform: scale(1,0.5);
}
</style>