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

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

代码语言：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;
    }
    .........完整代码请登录后点击上方下载按钮下载查看