floating message button.
The toggle effect and functionality on this button are handled almost entirely with CSS. If you look at the bottom-right corner of your screen, you’ll see a button with a color and icon that can be switched. On top of that, the transitions are super smooth and detailed — you can even adjust the animation duration to fit your needs.
The coolest part about this button is that we’ve added a 'popstate'(1) event. That means when the button is active, just pressing the back button on your browser or phone will automatically deactivate it. This is especially handy for mobile users, though we still provide a fallback back button just in case.
New CSS features made building this component way easier. You’ll want to use a modern browser for the best experience, since things like var() (for variables) and calc() (for math operations) work best in the latest versions.
This kind of component is called a FAB (Floating Action Button) — a floating button usually placed in the bottom-right corner of the screen (right where your thumb naturally rests). Its purpose is to trigger a focused action, which is why it’s round and eye-catching.
This button works great if you’re looking for a direct way to interact with your users — whether that’s for feedback or to answer quick questions about your service or product.
In the guide we provide, you’ll notice there’s quite a bit of CSS code, and it might look confusing at first. But don’t worry — we’ve added explanations for each line so you can pick up a bit of CSS knowledge while you set this up on your site. We’ve also separated the key variables, so you can easily set the colors, width, height, and even the transition duration all in one place.
In the future, we might even build a generator for this component — so you’ll be able to set everything up here and generate your code with just one click.
Hope you enjoy it!
- Popstate is an event that fires whenever the browser’s history changes — usually triggered when the user taps the back/forward button.