botao 3d

<!doctype html>
<html>
    <head>

    </head>
    <style>

        .btns {
            text-align:center;
            margin-top:502px;
                    }

                    .efeito {
                        border:none;
                        color:#fff;
                        padding:20px;
                        margin:20px;
                        font-size:24px;
                        line-height:24px;
                        border-radius:10px;
                        position:relative;
                        box-sizing:border-box;
                        cursor:pointer;
                        transition: all 400ms ease;}

    .efeito-6{
        background:#376693;
        transform-style:preserve-3d;}

    .efeito-6:after{
        top:-100%;
        left:0px;
        width:100%;
        padding:20px;
        background:#3a9999;
        position:absolute;
        border-radius:10px;
        box-sizing:border-box;
        transform-origin:left bottom;
        content:'aepora';
        transform:rotatex(90deg);}


    .efeito-6:hover {
        transform-origin:center bottom;
        transform:rotateX(-90deg) translateY(100%);    }


    </style>
<body>

    <div class="btns">
        <button type="button" class="efeito efeito-6">MUDAAAA</button>
    </div>

</body>

</html>