Subscribe to our mailing list | Página de suscribete con CSS

Page for subscribe to our mailing list with CSS | Página de suscribete a nuestra lista de email con CSS

By Ahmed Nasr

DEMO
HTML

<div class="subscribe-box">
<h2>Subscribe to our mailing list</h2>
<form class="subscribe">
<input type="email" placeholder="example@gmail.com" autocomplete="off" required="required"/>
<button type="submit"> <span>Subscribe</span></button>
</form>
</div>

FONT

<link href="https://fonts.googleapis.com/css?family=Gothic+A1|Marcellus&display=swap" rel="stylesheet">


CSS

body{background:#2bb24c;margin:0;color:#fff}
.subscribe-box{background:#2bb24c;font-family:'Gothic A1',serif;padding:6em 0;text-align:center}
.subscribe-box h2{margin:0 0 .85em;font-weight:100;font-size:30px;font-family:Marcellus,serif}
.subscribe-box .subscribe{width:100%;max-width:600px;margin:auto}
.subscribe-box .subscribe input{width:100%;background:0 0;border:0;border-bottom:1px solid;padding:1em 0 .8em;text-align:center;font-size:18px;font-family:inherit;font-weight:300;line-height:1.5;color:inherit;outline:0}
.subscribe-box .subscribe input::-webkit-input-placeholder{color:rgba(255,255,255,.5)}
.subscribe-box .subscribe input::-moz-placeholder{color:rgba(255,255,255,.5)}
.subscribe-box .subscribe input:-ms-input-placeholder{color:rgba(255,255,255,.5)}
.subscribe-box .subscribe input::-ms-input-placeholder{color:rgba(255,255,255,.5)}
.subscribe-box .subscribe input::placeholder{color:rgba(255,255,255,.5)}
.subscribe-box .subscribe button{all:unset;margin-top:2.4em;background:0 0;border:2px solid #fff;padding:1em 4em;border-radius:50px;cursor:pointer;display:inline-block;font-weight:700;position:relative;-webkit-transition:all 300ms ease;transition:all 300ms ease}
.subscribe-box .subscribe button span{display:inline-block;-webkit-transition:all 300ms ease;transition:all 300ms ease}
.subscribe-box .subscribe button:after,.subscribe-box .subscribe button:before{content:"";display:block;position:absolute;-webkit-transition:all 300ms ease;transition:all 300ms ease;opacity:0}
.subscribe-box .subscribe button:before{height:7px;width:7px;background:0 0;border-right:2px solid;border-top:2px solid;right:30px;top:21px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.subscribe-box .subscribe button:after{background:#fff;height:2px;width:50px;left:-6px;top:23.2px}
.subscribe-box .subscribe button:hover span{-webkit-transform:translateX(-10px);transform:translateX(-10px)}
.subscribe-box .subscribe button:hover:before{opacity:1}
.subscribe-box .subscribe button:hover:after{width:14px;opacity:1;-webkit-transform:translateX(160px);transform:translateX(160px)}
¿Te gusto el post?
¡Compártelo!