.Documents-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  height: 45px;
  border: none;
  padding: 0px 15px;
  border-radius: 5px;
  background-color: rgb(49, 49, 83);
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s;
}
.folderContainer {
  width: 40px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.fileBack {
  z-index: 1;
  width: 80%;
  height: auto;
}
.filePage {
  width: 50%;
  height: auto;
  position: absolute;
  z-index: 2;
  transition: all 0.3s ease-out;
}
.fileFront {
  width: 85%;
  height: auto;
  position: absolute;
  z-index: 3;
  opacity: 0.95;
  transform-origin: bottom;
  transition: all 0.3s ease-out;
}
.text {
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.Documents-btn:hover .filePage {
  transform: translateY(-5px);
}
.Documents-btn:hover {
  background-color: rgb(58, 58, 94);
}
.Documents-btn:active {
  transform: scale(0.95);
}
.Documents-btn:hover .fileFront {
  transform: rotateX(30deg);
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Animated Documents Folder Button Using HTML and CSS

Looking to add a modern, animated Documents button to your website? This stylish UI element mimics a 3D folder using just HTML and CSS — no JavaScript required.

Inspired by desktop-style file icons, this button visually opens when hovered, delivering a clean, interactive experience that’s perfect for web apps, dashboards, or admin panels.

What This Button Does

This interactive Documents button is more than just a label:

It displays a folder icon composed of layered SVG files (back, page, and front).
When the user hovers, the folder appears to open:
- The inner page slides up slightly.
- The folder flap (front) tilts upward with a 3D effect.
On click, the entire button scales down slightly, simulating a press.

This design adds life and personality to a simple button while maintaining a clean, professional appearance.

Code Features and Highlights

1. Folder Graphic Built from SVG

Three SVG layers build the folder:

fileBack – the back of the folder
filePage – a page inside the folder
fileFront – the front cover flap that tilts upward on hover

These elements are precisely stacked using z-index and absolute positioning.

2. Responsive Hover Animation

With a hover state:

The filePage lifts upward with a translateY effect.
The fileFront tilts using rotateX(30deg) to simulate a flap opening.
The background color of the button also darkens slightly for added contrast.

3. Press Animation on Click

On button press (:active), the component slightly shrinks using a CSS scale(0.95) transformation, giving realistic feedback.

4. Clean and Accessible Design

The button text reads “Documents” in a legible white font.
The overall color palette (purples, blues, and whites) makes it visually appealing on dark-themed interfaces.
With flexbox, the layout stays responsive and clean.

When to Use This Button

This folder-style button is great for:

File upload/download triggers
Navigation buttons to documents or archives
Dashboard widgets or control panels
Desktop-inspired UI designs in web apps

Benefits of Using Pure HTML & CSS

No JavaScript dependency = faster performance and easier integration
Fully customizable colors, shapes, and animations
SEO and accessibility friendly (you can easily add aria-label or screen reader tags)

Customize It Further

Want to tweak it?

Change the hover angle for a more dramatic or subtle flap effect.
Adjust the gradients for a different folder style (e.g., yellow folders for a more classic look).
Replace the “Documents” text with “Files”, “Downloads”, or any custom label.

Final Thoughts

This animated folder button is a creative addition to any modern website UI. It’s lightweight, eye-catching, and elevates a standard interface element into something dynamic and interactive.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.