Drag

Together with

Eduard Bodak

Eduard Bodak

Button Pack

100 buttons with real character. Fully accessible. Ready for Webflow and HTML/CSS/JS.

webflow-ready
and
HTML/CSS/JS

Amazing 🚀

We'll keep you in the loop and update you when we have more information about the button pack!

Something went wrong while submitting.

Be first to know!

In the age of AI, everything looks the same. The details are what people remember. This pack is built around that idea.

01

Same everything

Many sites ship the same generic components. Same hover states. Same transitions. Same feeling. Claude, ChatGPT and the likes made it faster to build, but it also made everything blend together.

02

The detail that matters

A well-crafted button is the kind of thing that makes someone pause and think "these people care." On a good site, that moment is everything. That's what this pack is built around.

03

Built for real products

Every button ships with clear states: default, hover, active, focus. Every transition is intentional, performance-first, and tested in production.

04

A starting point, not a dead end

Take the active state from one button, the background hover from another, combine them into something new. Every animation lives inside the button, but if you know your way around code, it can live anywhere. These are building blocks for your entire motion system.

100 buttons with real personality, and the flexibility to make them yours

100 Unique Buttons
Copy to Webflow
Get HTML/CSS/JS
Fully Accessible
Easy to Adapt
100 Unique Buttons
Copy to Webflow
Get HTML/CSS/JS
Fully Accessible
Easy to Adapt

Give it a try!

Button 005

Button 005

Button 007

Button 007

Button 010

Button 010

Button 004

Button 004

Button 030

Button 030

Button 027

Button 027

Button 017

Button 017

Button 024

Button 024

Button 014

Button 014

Made with
great care

Every button is built the way you would build it (if you had one week per button).

  • Flexible architecture

    Every button is controlled by CSS variables; Colors, padding, radius, easing, focus insets. Adjust them in seconds and the whole button adapts. They ship opinionated, but they'll never fight your design system.

  • Accessible by default

    Semantic HTML elements, clear focus-visible states, proper ARIA labels, and prefers-reduced-motion support.

  • Crafted interactions

    Every hover state, every transition, every easing curve is intentional. These aren't boring CSS defaults with a color swap. The motion layer is what makes them feel like they belong on a site that cares.

Osmo is
used by:

Connect
Worldwide

Globe Map

Osmo’s Global
Community

Osmo empowered me to take on any creative challenge

Dang Nguyen

Dang Nguyen

Head of Creative

Thanks to Osmo, I’ve won my first major awards and signed clients I once only dreamed of. Their powerful, easy-to-use effects feature cutting-edge code that has expanded my development skills. Joining this community is an easy choice for developers at any level who want to grow and succeed!

This gets the official GSAP stamp of approval.

Cassie Evans

Cassie Evans

Education GSAP

Even if you know GSAP, it can be tricky to apply abstract animation concepts to real-world scenarios. Dennis and Ilja have come to the rescue with this treasure-trove of useful techniques. There’s something for everyone here, grab-and-go or use the code as a jumping off point.

One of a kind platform for any developers out there.

Huy (by Huy)

Huy (by Huy)

Designer & YT creator

It's incredible to be able to see and learn how the pros implement their animations. If you love web animations and creative development, this platform this a no brainer. Just sign up already.

The creative developer's cheat code.

Jordan Gilroy

Jordan Gilroy

Web Designer

Osmo is a one-stop shop, offering everything from snippets to help you set up your site to advanced animations and interactions that elevate it to the next level. The resources are so easy to implement, and with some imagination, you can adapt them to create something unique.

"Even I" came across a few neat tricks I hadn’t seen before.

Jesper Landberg

Jesper Landberg

Creative Developer

Osmo Supply is a gem for clever and well-thought-out code/no-code solutions for animations and components. It’s a resource both beginners and seasoned pros will find incredibly useful. Lama stamp of approval on this one, and I’ll deffo be coming back to it!

The Osmo Vault has been a great partner in speeding up my projects

Victor Work

Victor Work

VW Lab

Osmo Supply has been a great partner in speeding and building up my projects since its release. I have used the vault in countless projects, and it's fantastic to be a part of such an inspiring community. Osmo, it's a must-have.

In collaboration with Eduard Bodak

Eduard Bodak

Meet Eduard!

Eduard is a creative developer dedicated to making websites feel good. His work centers on thoughtful motion, subtle micro-interactions, and a strong commitment to accessibility. He is known for sharing detailed breakdowns of his process online, giving a closer look at the care and craft behind everything he does.

Choose what works for you

All of our Osmo members will have 50 of the buttons unlocked in their Vault by default. They can unlock the remaining 50 for just €50 EUR.

01

€100

One-Time Payment

access forever
coming soon
or
02

Included

50 buttons included with your membership

+ Unlock remaining 50 for €50
+ Unlock remaining 50 for €50
coming soon
coming soon

Love buttons?
Get the latest updates

We won’t spam you, pinky promise.

Amazing 🚀

We'll keep you in the loop and update you when we have more information about the button pack!

Something went wrong while submitting.

Be first to know!