<!--Выезд фона слева-->

<script>
    $('.btn-left-line-mt-2').addClass('btn-left-line-mt');
</script>


<style>
   :root {
        --BtnBGColorShape:  #121D57; /*цвет фона кнопки*/
        --BtnBGColorShapeHover: #FFFFFF; /*цвет фона кнопки по наведению*/
        --BtnColorShape: #fff; /*цвет текста кнопки*/
        --BtnColorShapeHover: #121D57; /*цвет текста кнопки по наведению*/
        --BtnRadius: 50px; /*радиус угла*/
    }
</style>

<style>
    .btn-left-line-mt {
        border-radius: var(--BtnRadius);
        overflow: hidden !important;
    }
    /*Вторая кнопка*/
    .btn-left-line-mt-2 {
        border-radius: 50px !important;
    }
    .btn-left-line-mt .tn-atom {
        background-color: transparent !important;
    }
    .btn-left-line-mt .tn-atom:after {
        content:'';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: var(--BtnBGColorShapeHover);
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 0px var(--BtnRadius) var(--BtnRadius) 0px;
        z-index: -1;
        transform: translate(-105%, 0);
        transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    /*Вторая кнопка*/
    .btn-left-line-mt-2 .tn-atom:after {
        background-color: red;
        border-radius: 0px 50px 50px 0px;
    }
    
        .btn-left-line-mt .tn-atom:before {
        content:'';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: var(--BtnBGColorShape);
        position: absolute;
        left: 0;
        top: 0;
        border-radius: var(--BtnRadius);
        z-index: -2;
    }
    /*Вторая кнопка*/
     .btn-left-line-mt-2 .tn-atom:before {
         background-color: green;
     }
    .btn-left-line-mt:hover .tn-atom:after {
        transform: translate(0%, 0);
    }
    .btn-left-line-mt .tn-atom {
        color: var(--BtnColorShape) !important;
    }
    /*Вторая кнопка (цвет текста)*/
    .btn-left-line-mt-2 .tn-atom {
        color: blue !important;
    }
    
    .btn-left-line-mt:hover .tn-atom {
        color: var(--BtnColorShapeHover) !important;
    }
     /*Вторая кнопка (цвет текста по наведению)*/
    .btn-left-line-mt-2:hover .tn-atom {
        color: brown !important;
    }
</style>