Save button with floppy disk
Type and an unsaved dot appears; save with the floppy or Ctrl+S and the metal shutter slides while the drive light blinks.
Settings
Code
<div class="uvq15-fdd"><header><span class="fn">notas-reunion.txt</span><span class="ss"><i></i><b class="st">Saved</b></span></header><textarea rows="3" aria-label="Notes" spellcheck="false">Review the budget with Laura and send the plans before Thursday.</textarea><footer><button type="button" class="dk"><span class="sh" aria-hidden="true"></span><span class="lb">Save</span></button><div class="dr"><span class="led" aria-hidden="true"></span><span class="hk"><kbd>Ctrl</kbd> + <kbd>S</kbd></span><time class="tm">12:00</time></div></footer><p class="sr" aria-live="polite"></p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Microinteractions
See all MicrointeractionsWhere to use it
Saving is one of the most repeated actions in any editor, and this block turns it into a small piece of nostalgia. The button is a 3.5 inch floppy drawn in CSS: on save the metal shutter slides, the disk dips as if entering a drive and a green light blinks. It suits note apps, settings panels and document editors.
Typing marks the file as unsaved with an amber dot, and Ctrl+S or Cmd+S saves from anywhere inside the block. Change the main color for the disk plastic and the secondary for the light, and keep the timestamp so people know when they last saved.