Блог

У меня есть форма подписки.Он имеет два входа: «текст и кнопка». Они отзывчивы. когда я изменяю размер окна, перенос очень сильный и жесткий. кнопка ввода попадает в углы и устанавливает свое место строго в точке и перехода, когда ввод текста перемещается влево при изменении размера окна. Я хотел бы сделать его очень плавным переходом, даже до его конечной продолжительности.

CSS:

 input[type=text]{padding:.236em .5em;border:1px solid #c2c2c2;-webkit-border-radius:0.125em;border-radius:0.125em;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;font-size:1em;line-height:1.618em;font-family:inherit;outline:none;margin:5px .327em;background:#f8f8f8;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;}

/* Newsletter*/
.newsletter form, .newsletter label, .newsletter input{margin:0;padding:0;border:0;outline:0;font-size:100%;}
.newsletter .wrapper{max-width:1240px;margin:0 auto;padding:0 3%;position:relative;}
.row{position:relative;}
.row:after{content:"";display:table;clear:both;}
[class^="kol-"]{width:100%;margin-right:5%;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
[class^="kol-"]:last-child{margin-right:0%;}
@media (min-width:768px){.kol-6{width:47.5%;}
}
.top-15{margin-top:15px;}
.newsletter .btn-red{width:auto;padding:15px 25px;background:#ed1c24;color:#fff;text-transform:uppercase;font-size:20px;font-family:'Conv_gotham-bold-webfont', Arial, Helvetica, sans-serif;border-radius:0;display:inline-block;-webkit-appearance:none;}
.newsletter .btn-red:hover{background:#424242;color:#fff;-webkit-appearance:none;}
.newsletter button.btn-red{border:0;}
.newsletter textarea, .newsletter input[type=text], .newsletter input[type=email]{font-size:15px;font-family:'gotham_bookregular', Arial, Helvetica, sans-serif;-webkit-transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;-ms-transition:all 0.3s ease 0s;width:100%;line-height:normal !important;outline:0;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;}
.newsletter button[type=submit]{
    -webkit-transition:all 0.7s ease 0s;
    -moz-transition:all 0.7s ease 0s;
    -o-transition:all 0.7s ease 0s;
    -ms-transition:all 0.7s ease 0s;
    }
.newsletter textarea{resize:none;-webkit-appearance:none;}
.newsletter{padding:40px 0 25px 0;border:1px dashed #e7e7e7;background:#fff;margin:20px 30px;}
.newsletter input[type="text"]{width:55%;padding:18px 15px;float:left;box-shadow:none;}
.newsletter input[type="text"]:focus{border-color:#888;background:#fff;-webkit-box-shadow:0 0 0 0.327em rgba(128, 128, 128, 0.1), 0 0 0.202em rgba(128, 128, 128, 0.4);box-shadow:0 0 0 0.327em rgba(128, 128, 128, 0.1), 0 0 0.202em rgba(128, 128, 128, 0.4);}
.newsletter .btn-red{width:42%;white-space:nowrap;float:right;}


@media screen and (max-width:992px){.social{text-align:center;}
}
@media (min-width:768px) and (max-width:1080px){.newsletter .btn-stars:before, .newsletter .btn-stars:after{display:none;}
}
@media (max-width:768px){.newsletter input[type="text"], .newsletter .btn-red{width:100%;margin-bottom:15px;}
}
 

HTML

 <div class="newsletter">
    <div class="wrapper">
        <div class="row">
        
            <div class="kol-6 top-15">
                <input type="text" name="EMAIL" value="" class="required email" placeholder="Enter your e-mail" id="mce-EMAIL">
                <button type="submit" class="btn-red btn-stars">Subscribe</button>
            </div>
        
        </div><!-- end row -->
    </div><!-- end wrapper -->
</div><!-- end newsletter -->
 

JSFiddle