css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

A button that seamlessly transitions into a yes/no confirmation.


  1. Super cool! :D Great work!

  2. Crazy awesome!

  3. So subtle and sweet.

  4. This is very nice and subtle, but why is btn-front not an actual button? I can reach it with my keyboard.

  5. @Michiel No particular reason, for the intent and purpose of this experiment I don't think it makes a difference.

  6. @hakimel since this pen now has over six thousand views and almost 200 hearts; I beg to differ. This seems to be popular; so the “it's just a demo” excuse doesn't fly here—nor should it be an acceptable excuse anywhere else. Accessibility is a big part of the internet that a lot of people tend to ignore for some reason. Adding some :focus styles and usage of the correct element doesn't seem like a stretch in this case. Also bear in mind that the delete button should be first in the tabbing order; so it should come first in the DOM :)

    I'd thank you if you made these adjustments.

  7. Good job ..

  8. @Michiel Appreciate the opinion but I disagree. I create this stuff in my free time to have fun so I get to be entirely subjective when deciding what I want to work on. Even if that means excluding things that may be critical in another context, like making things work cross browser.

  9. @Michiel I agree with your sentiment and encourage you to fork the Pen and provide the accessibility this pen needs. Keyboard access and focus state.. etc. would be a fun challenge...then post a link to your pen in the comments here so people can see it in action. Unfortunately,.. cross-human compatibility isn't baked into most developers workflow.

  10. @joe-watkins sorry mate, I thought you were the creator, my bad. Still, it's not our job to fix this stuff, people should know better.

    @hakimel so you don't want everyone to appreciate your work? You don't care for around 14% of the population? You don't incorporate accessibility in your day-to-day work?

  11. Really cool, as always @hakimel. But wait! It isn't actually deleting anything! Therefore THIS IS NOT VALID! Agree, @Michiel ? :p

    Just another POV.

  12. This looks awesome!

  13. Chuy!!!!

  14. @peduarte I don't know what you're getting at.

  15. @Michiel Did you even bother reading my comment? I'm not talking about day-to-day work. Of course accessibility is important there. I'm talking about experiments–like this one–with the sole purpose of demonstrating a visual effect.

  16. @Michiel Anyway – let's just agree to disagree. I work on these experiments to have fun and relaxing time, this conversation has proved to be neither of those things so it's over :)

  17. awesome.. :)

  18. @hakimel sure, just remember you could've made the adjustments in the time you took to write these useless replies.

  19. @Michiel this is codepen, a place where you can discover others' people work and fork it. If you have an idea on how to improve a pen, "it is your job" to fork it and make it happen, thus contributing to the world. Not by saying what should be done, but by doing it.

  20. hi, I do like this. However, one improvement I would like to suggest is to swap the order of the Yes/No buttons based on which half of the Delete button the user clicked. That way, by an accidental double click, nothing bad would happen. As it is, it's possible to accidentally click the delete and the Yes confirmation button. That way, the No button would always appear on the side of the dialogue, where the mouse cursor currently rests.

  21. @Hakim Great work. @Michiel You broke the golden rule: Don't be a dick.

  22. @Michiel, you're missing the intent of this work, it's a prototype, a proof of concept. It's not intended to be used in production, as is.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.