Border Draw

The code

A glimpse of the source:

<button class="demo-btn btn-border-draw">
    Border Draw
    <span class="border-left">
    </span>
    <span class="border-right">
    </span>
  </button></div>

Concrete use cases

A few real contexts where Border Draw shines:

• The primary action of a contact form
• The main button of a sales page
• A newsletter sign-up CTA

How it works

Pure CSS effect — no JavaScript dependency.

Make it yours

You can tweak:

• the colors, size and timing straight in the CSS

Add it in 3 steps

1. Paste the HTML where you want the effect on your page.
2. Add the CSS to your stylesheet (or in a <style> tag).
3. Tweak the colors and CSS variables to match your brand — nothing to install.

Browser support

Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation.

More Buttons effects

FAQ