纯CSS3实现3D浮动按钮

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是纯CSS3实现3D浮动按钮的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>纯CSS3实现3D浮动按钮</title>

    <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>

</head>

<body>

  <div id="pbtn">
  <div id="btnlabel">Ohai!<br/>&hearts;</div>
</div>
</body>
</html>

CSS代码(style.css):

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

附件:下载该文件资源,减少时间成本(增值服务)