HTML_Buton_animat

<!DOCTYPE html>
<html lang="ro">
    <head>
        <title>Cosmin Vârlan</title>
        <meta charset="utf-8" />
        <meta name="description" content="Ne aranjam..." />

        <link rel="icon" href="https://profs.info.uaic.ro/~vcosmin/img/favicon_cv.ico" type="image/x-icon">
        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
        <style>
            body{
                font-family: 'Roboto', sans-serif;
            }
            button{
                position: relative;
                background-color:#369;
                color:white;
                border:0;
                height:30px;
                width:80px;
                top:0;
                left:0;
                overflow:hidden;
                z-index:0;
            }
            button::before{
                position: absolute;
                content:' ';
                height:30px;
                width:80px;
                background-color:darkred;
                top:30px;
                left:0px;
                z-index:-1;
            }
            button:hover::before{
                position: absolute;
                transition:all 0.2s;
                background-color:darkred;
                height:30px;
                width:80px;
                top:0;
                left:0;
            }

        </style>
    </head>
    <body>

       <button>MyButton</button>
       <button>MyButton</button>
       <button>MyButton</button>


    </body>
</html>