CSS Hover Me

HTML CODE:

<div class="box">
        <a href="" class="btn btn1">Hover Me</a>
        <a href="" class="btn btn2">Hover Me</a>
        <a href="" class="btn btn3">Hover Me</a>
        <a href="" class="btn btn4">Hover Me</a>
    </div>

---

CSS CODE:

body{
            margin:0;
            padding:0;
            background:#262626;
        }
        .box{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
        .btn {
            position: relative;
            display: block;
            color: #fff;
            font-size: 14px;
            font-family: Verdana;
            text-decoration: none;
            margin: 30px 0px;
            border: 2px solid #a29b00;
            padding: 14px 60px;
            text-transform: uppercase;
            overflow: hidden;
            transition: 1s all ease;
        }
            .btn::before {
                content: "";
                background: #a29b00;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                z-index: -1;
                transition: all 0.6s ease;
            }
            .btn1::before{
                width:0;
                height:100%;
            }
            .btn:hover::before{
                width:100%;
            }
            .btn2::before{
                width:100%;
                height:0;
            }
            .btn2:hover::before{
                height:100%;
            }
            .btn3::before{
                width:100%;
                height:0;
                transform:translate(-50%,-50%) rotate(45deg)
            }
            .btn3:hover::before{
                height:180%;
            }
        .btn4::before {
            width: 100%;
            height: 0;
            transform: translate(-50%,-50%) rotate(-45deg)
        }

        .btn4:hover::before {
            height: 380%;
        }