做一个简单有效果的按钮

分析： 首先来一个button，将按钮套在div里面，来点高级的颜色。利用div和button设置伪元素，给定位伪元素直接让它靠边，加上我们的过度，鼠标触碰触发动画效果

主要： 按钮移动的边框和上移的阴影，这还是主要运用到了伪元素、过渡、动画；

废话少说，直接代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            
            background-color: rgb(36, 46, 80);
        }
        div {
            position: relative;
            margin: 400px auto;
            width: 200px;
            height: 60px;
            /* background-color: aqua; */
            display: flex;
            overflow: hidden;
            transition: all .5s;
            

        }
        div:hover {
          transform: translateY(-10px);
          box-shadow: 1px 9px 11px 1px;
        }
        button {
            display: flex;
            position: relative;
            height: 100%;
           width: 100%;
           font-size: 35px; 
           color: rgba(255, 255, 255, 0.877);
           background-color: rgba(0, 105, 105, 0.479);
           border: 0;
           justify-content: center;
           align-items: center;
           transition: all 0.1s;
           overflow: hidden;
           
        }
        button:hover::after  {
            animation: dan 1.2s linear infinite;
            opacity: 1;
        }
        button:hover::before  {
            animation: dan1 1.2s linear infinite;
            opacity: 1;
        }
        div:hover::after  {
            animation: dan2 1.2s linear infinite;
            opacity: 1;
        }
        div:hover::before  {
            animation: dan3 1.2s linear infinite;
            opacity: 1;
        }
        @keyframes dan {
            0%{
                bottom: 300px;
            }
           
            100% {
                bottom: -60px;
            }
        }
        @keyframes dan1 {
            0%{
                bottom: -200px;
            }
           
            100% {
                bottom: 60px;
            }
        }
        @keyframes dan2 {
            0%{
                left: 400px;
            }
           
            100% {
                left: -200px;
            }
        }
        @keyframes dan3 {
            0%{
                left: -400px;
            }
           
            100% {
                left: 200px;
            }
        }
     
        button::after,
        button::before,
        div::before,
        div::after {
            content: '';
            z-index: 2;
            position: absolute;
            /* background-color: deepskyblue; */
            opacity: 0;
            
        }
        button::after {
            left: 169px;
            transform: rotate(90deg);
           width: 60px;
            height: 4px;
            background-image: linear-gradient(90deg,rgba(0, 105, 105, 0.479),rgb(255, 255, 255));
            
        }
        button::before {
            left: -29px;
            transform: rotate(90deg);
           width: 60px;
            height: 4px;
            background-image: linear-gradient(-90deg,rgba(0, 105, 105, 0.479),rgb(255, 255, 255));
            
        }
     
        div::before {
            transform:translate(0,0);
           width: 100%;
            height: 4px;
            background-image: linear-gradient(90deg,rgba(0, 105, 105, 0.479),rgb(255, 255, 255));
        }
        div::after {
            transform:translate(0,58px);
           width: 100%;
            height: 4px;  
            background-image: linear-gradient(-90deg,rgba(0, 105, 105, 0.479),rgb(255, 255, 255));    
        }
      
       
            
       
      
            
       
    </style>
</head>
<body>
    <div><button>L o o k</button></div>
    
</body>
</html>

（代码过于潦草，还有很多可以优化的地方，记住原理就行🤭🤭🤭🤭）（斯蒂嘛san）

有效果的按钮👉

做一个简单有效果的按钮