css实现16款带阴影鼠标悬停按钮动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：css实现16款带阴影鼠标悬停按钮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
      background: #e0e5ec;
    }
    h1 {
      position: relative;
      text-align: center;
      color: #353535;
      font-size: 50px;
      font-family: "Cormorant Garamond", serif;
    }
    
    p {
      font-family: 'Lato', sans-serif;
      font-weight: 300;
      text-align: center;
      font-size: 18px;
      color: #676767;
    }
    .frame {
      width: 90%;
      margin: 40px auto;
      text-align: center;
    }
    button {
      margin: 20px;
    }
    .custom-btn {
      width: 130px;
      height: 40px;
      color: #fff;
      border-radius: 50px;
      padding: 10px 25px;
      font-family: 'Lato', sans-serif;
      font-weight: 500;
      font-size: 16px;
      background: transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      display: inline-block;
       box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),
        inset -7px -7px 10px 0px rgba(0,0,0,.1),7px 7px 20px 0px rgba(0,0,0,.1),
       4px 4px 5px 0px rgba(0,0,0,.1);
      text-shadow:  2px 2px 3px rgba(255,255,255,.5),
                  -4px -4px 6px rgba(116, 125, 136, .2);
      outline: none;
    }
    
    /* 1 */
    .btn-1 {
      color: rgba(0,3,255,.5);
      background-color: #b2d8ff;
      border: none;
    }
    .btn-1:hover {
       color: rgba(0,3,255, .7);
    background: linear-gradient(0deg, rgba(0,3,255,.5) 0%, rgba(2,126,251,.5) 100%);
    }
    
    /* 2 */
    .btn-2 {
      background-color: #e8d1ff;
      color: rgba(96,9,240, .5);
      border: none;
      
    }
    .btn-2:before {
      height: 0%;
      width: 2px;
    }
    .btn-2:hover {
      box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
                  -4px -4px 6px 0 rgba(116, 125, 136, .5), 
        inset -4px -4px 6px 0 rgba(255,255,255,.2),
        inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
    }
    
    
    /* 3 */
    .btn-3 {
      color: rgba(2,126,251,1);
      background: rgba(118,174,241,1);
      width: 130px;
      height: 40px;
      line-height: 42px;
      padding: 0;
      border: none;
      
    }
    .btn-3 span {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
    }
    .btn-3:before,
    .btn-3:after {
      position: absolute;
      content: "";
      right: 0;
      top: 0;
       background: rgba(2,126,251,1);
      transition: all 0.3s ease;
    }
    .btn-3:before {
      height: 0%;
      width: 2px;
    }
    .btn-3:after {
      width: 0%;
      height: 2px;
    }
    .btn-3:hover{
       background: transparent;
      box-shadow: none;
    }
    .btn-3:hover:before {
      height: 100%;
    }
    .btn-3:hover:after {
      width: 100%;
    }
    .btn-3 span:hover{
       color: rgba(2,126,251,1);
    }
    .btn-3 span:before,
    .btn-3 span:after {
      position: absolute;
      content: "";
      left: 0;
      bottom: 0;
       background: rgba(2,126,251,1);
      transition: all 0.3s ease;
    }
    .btn-3 span:before {
      width: 2px;
      height: 0%;
    }
    .btn-3 span:after {
      width: 0%;
      height: 2px;
    }
    .btn-3 span:hover:before {
      height: 100%;
    }
    .btn-3 span:hover:after {
      width: 100%;
    }
    
    /* 4 */
    .btn-4 {
      color: #03c8a8;
    background: #96e4df;
      line-height: 42px;
      padding: 0;
      border: none;
    }
    .btn-4:hover{
      background-color: #89d8d3;
    
    }
    
    
    
    /* 5 */
    .btn-5 {
      border: none;
      color: #ff84c1;
      background-color: #ffc1e0;
    }
    .btn-5:hover {
      color: #f0094a;
      background: transparent;
       box-shadow:none;
    }
    .btn-5:before,
    .btn-5:after{
      content:'';
      position:absolute;
      top:0;
      right:0;
      height:2px;
      width:0;
      background: #f0094a;
      box-shadow:
       -1px -1px 5px 0px #fff,
       7px 7px 20px 0px #0003,
       4px 4px 5px 0px #0002;
      transition:400ms ease all;
    }
    .btn-5:after{
      right:inherit;
      top:inherit;
      left:0;
      bottom:0;
    }
    .btn-5:hover:before,
    .btn-5:hover:after{
      width:100%;
      transition:800ms ease all;
    }
    
    
    /* 6 */
    .btn-6 {
      color: rgba(234,76,137,1);
      background: rgb(247,150,192);
      line-height: 42px;
      padding: 0;
      border: none;
    }
    .btn-6 span {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
    }
    .btn-6:before,
    .btn-6:after {
      position: absolute;
      content: "";
      height: 0%;
      width: 1px;
     box-shadow:
       -1px -1px 20px 0px rgba(255,255,255,1),
       -4px -4px 5px 0px rgba(255,255,255,1),
       7px 7px 20px 0px rgba(0,0,0,.4),
       4px 4px 5px 0px rgba(0,0,0,.3);
    }
    .btn-6:before {
      right: 0;
      top: 0;
      transition: all 500ms ease;
    }
    .btn-6:after {
      left: 0;
      bottom: 0;
      transition: all 500ms ease;
    }
    .btn-6:hover{
      background: transparent;
      color: #76aef1;
      box-shadow: none;
    }
    .btn-6:hover:before {
      transition: all 500ms ease;
      height: 100%;
    }
    .btn-6:hover:after {
      transition: all 500ms ease;
      height: 100%;
    }
    .btn-6 span:before,
    .btn-6 span:after {
      position: absolute;
      content: "";
      box-shadow:
       -1px -1px 20px 0px rgba(255,255,255,1),
       -4px -4px 5px 0px rgba(255,255,255,1),
       7px 7px 20px 0px rgba(0,0,0,.4),
       4px 4px 5px 0px rgba(0,0,0,.3);
    }
    .btn-6 span:before {
      left: 0;
      top: 0;
      width: 0%;
      height: .5px;
      transition: all 500ms ease;
    }
    .btn-6 span:after {
      right: 0;
      bottom: 0;
      width: 0%;
      height: .5px;
      transition: all 500ms ease;
    }
    .btn-6 span:hover:before {
      width: 100%;
    }
    .btn-6 span:hover:after {
      width: 100%;
    }
    
    /* 7 */
    .btn-7 {
    background: #ffbf7f;
      line-height: 42px;
      color: darkorange;
      padding: 0;
      border: none;
    }
    .btn-7 span {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
    }
    .btn-7:before,
    .btn-7:after {
      position: absolute;
      content: "";
      right: 0;
      bottom: 0;
      background: rgba(251,75,2,1);
      box-shadow:
       -7px -7px 20px 0px rgba(255,255,255,.9),
       -4px -4px 5px 0px rgba(255,255,255,.9),
       7px 7px 20px 0px rgba(0,0,0,.2),
       4px 4px 5px 0px rgba(0,0,0,.3);
      transition: all 0.3s ease;
    }
    .btn-7:before{
       height: 0%;
       width: 2px;
    }
    .btn-7:after {
      width: 0%;
      height: 2px;
    }
    .btn-7:hover{
      color: rgba(251,75,2,1);
      background: transparent;
    }
    .btn-7:hover:before {
      height: 100%;
    }
    .btn-7:hover:after {
      width: 100%;
    }
    .btn-7 span:before,
    .btn-7 span:after {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      background: rgba(251,75,2,1);
      box-shadow:
       -7px -7px 20px 0px rgba(255,255,255,.9),
       -4px -4px 5px 0px rgba(255,255,255,.9),
       7px 7px 20px 0px rgba(0,0,0,.2),
       4px 4px 5px 0px rgba(0,0,0,.3);
      transition: all 0.3s ease;
    }
    .btn-7 span:before {
      width: 2px;
      height: 0%;
    }
    .btn-7 span:after {
      height: 2px;
      width: 0%;
    }
    .btn-7 span:hover:before {
      height: 100%;
    }
    .btn-7 span:hover:after {
      width: 100%;
    }
    
    /* 8 */
    .btn-8 {
      background-color: #d9d0f5;
       color: #c797eb;
      line-height: 42px;
      padding: 0;
      border: none;
    }
    .btn-8 span {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
    }
    .btn-8:before,
    .btn-8:after {
      position: absolute;
      content: "";
      right: 0;
      bottom: 0;
      background: #c797eb;
      transition: all 0.3s ease;
    }
    .btn-8:before{
       height: 0%;
       width: 2px;
    }
    .btn-8:after {
      width: 0%;
      height: 2px;
    }
    .btn-8:hover:before {
      height: 100%;
    }
    .btn-8:hover:after {
      width: 100%;
    }
    .btn-8:hover{
      background: transparent;
    }
    .btn-8 span:hover{
      color: #c797eb;
    }
    .btn-8 span:before,
    .btn-8 span:after {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      background: #c797eb;
      transition: all 0.3s ease;
    }
    .btn-8 span:before {
      width: 2px;
      height: 0%;
    }
    .btn-8 span:after {
      height: 2px;
      width: 0%;
    }
    .btn-8 span:hover:before {
      height: 100%;
    }
    .btn-8 span:hover:after {
      width: 100%;
    }
      
    
    /* 9 */
    .btn-9 {
      border: none;
      transition: all 0.3s ease;
      overflow: hidden;
      color: #1fd1f9;
      color: #0cbcff;
    }
    .btn-9:after {
      position: absolute;
      content: " ";
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #5fe0fd;
      transition: all 0.3s ease;
    }
    .btn-9:hover {
      background: transparent;
      box-shadow:  4.........完整代码请登录后点击上方下载按钮下载查看