cry-d/animated-compress-file-button

Animated Compress File Button

This project provides a simple HTML and CSS implementation for an animated compress file button.

Installation

Clone this repository and open index.html in a web browser.

git clone https://github.com/yourusername/animated-compress-file-button.git

Usage

Add the following code to your HTML file:

<button class="button">
  <div class="paper left"></div>
  <div class="paper middle"></div>
  <div class="paper right"></div>
  <div class="inner">
    <div class="zipper">
      <div class="line"></div>
      <div class="gradient"></div>
    </div>
    <span>Compress files</span>
    <svg viewBox="0 0 20 16">
      <polyline points="3 8.75 7.75 13.5 17 2.5"></polyline>
    </svg>
  </div>
</button>

And add the following CSS code to your stylesheet:

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap");

/* Paste the code from style.css here */

Preview