Elegant Off-Canvas CSS3 Subscribe Button

07 Nov 2016

css
sendy

If you have not noticed hover your mouse over the SUBSCRIBE button bottom-middle of this page.

Cool, huh? That is what we are going to achieve at the end of this post. :)

We will be doing it for Sendy, but actually you can drop in any form from any provider.

Let’s get dirty

Here is the HTML:

<div class="sendy-subscribe">
  <div class="sendy-header">
    SUBSCRIBE
  </div>
  <div class="sendy-body">
    Subscribe to my e-mail list.<br>
    <span class="sendy-small">You can unsubscribe anytime.</span>
    <form action="http://env.hu/subscribe" method="POST" accept-charset="utf-8">
      <input type="text" name="name" id="name" placeholder="Your Name"/>
      <br/>
      <input type="text" name="email" id="email" placeholder="Your E-mail address"/>
      <br/>
      <input type="hidden" name="list" value="YOUR-SENDY-LIST-ID-GOES-HERE"/>
      <button type="submit" name="submit" id="submit">Subscribe</button>
    </form>
  </div>
</div>

Here comes the CSS.

.sendy-subscribe {
    position: fixed;
    right:25%;
    left:50%;
    margin-left:-75px;
    bottom:-225px;
    height:260px;
    width:150px;
    border:1px solid #DEDEDE;
    background-color:rgba(255,255,255,0.9);
    padding:5px 15px;
}

We are positioning it fixed, and “throw it” off-canvas by giving a negative number to the bottom.
We also would like to position it right to the middle. To achieve that we set the left:50% and right:25% and the margin-left equals width/-2, so -75. The background-color is set to white with an rgb code of 255,255,255 and the opacity (alpha) to 0.9 to give it a nice transparent-ish effect.

Now let’s move to the hover effect.

.sendy-subscribe:hover {
    color:white;
    background-color:rgba(0,0,0,0.8);
    bottom:-10px;
    margin-left:-200px;
    width:400px;
}

What we do here is changing the width to 400px, so width/-2 will equals margin-left:-200px and making the background black with a bit more transparency.

Now our effect is a bit lame, it changes instantly.

Let’s utilize CSS3 animations to fix that, set transition to 1s with an ease-in-out effect.

.sendy-subscribe {
    position: fixed;
    right:25%;
    left:50%;
    margin-left:-75px;
    bottom:-225px;
    height:260px;
    width:150px;
    border:1px solid #DEDEDE;
    background-color:rgba(255,255,255,0.9);

    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

    padding:5px 15px;
}

Now it is kinda lovely now, but one more thing before throwing the remaining styling on it. We need to add an onclick="" to the wrapper div in order to make it possible to click on it from a touch device. Since you just can not hover on it with an iPhone. :)

<div class="sendy-subscribe" onclick="">
  <div class="sendy-header">
    SUBSCRIBE
  </div>
...

Okay, now fix the styling for the header, inputs and submit button.

.sendy-subscribe .sendy-header {
    text-align:center;
    color:black;
    font-size:16px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.sendy-subscribe:hover .sendy-header {
    text-align:center;
    color:white;
    font-size:24px;
}

.sendy-subscribe .sendy-body {
    font-size: 18px;
    text-align:center;
}
.sendy-subscribe .sendy-body input {
    background-color: transparent;
    border: none;
    height:26px;
    font-size:18px;
    border-bottom: 2px solid #DADADA;
    margin:10px auto;
    color:white;
    width:220px;
}

.sendy-subscribe .sendy-body button {
    background-color: transparent;
    color: white;
    padding: 7px 14px;
    margin: 8px 0 8px -5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    border:2px solid white;
    width:220px;
    font-size:18px;
}

.sendy-subscribe .sendy-body button:hover {
    border:2px solid white;
    background-color: white;
    color:black;
}

.sendy-subscribe .sendy-small {
    font-size:12px;
    margin:-60px;
    padding:-60px;
}

Start polishing until it looks OK

The only remaining step is now, to tweak the sizes, position, colors, etc. until it meets your current design. But I think this design is just almost fine for every website.

Do not forget, that you can use my button to subscribe to my e-mail list so I can send you weekly or monthly newsletter.

Cheers,
Jozsef

Elegant Off-Canvas CSS3 Subscribe Button

Let’s get dirty

Start polishing until it looks OK

If you liked this, please subscribe