Skip to content
CSS3 Animations that cause buttons to morph into forms.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Animation1
Animation2
.gitignore
README.md

README.md

Morpherings

CSS3 Animations that causes buttons to morph into forms. A few lines of javascript is used for triggering. This is mostly a personal project I made for fun, but I can imagine it being useful in some situations. For example if you don't want to redirect the user to another page to sign up. Depending on your website layout it could be a bit too verbose to have a extensive form in the middle of the webiste, with these animations the form appears only when you want it to. Which allows you to have a less cluttered page. A smooth animation is quicker than loading a new page.

Accessibility

Having accessible forms is important. Therefore, I have done my best to make the forms accessible. Animation1 has been tested with JAWS, and seems to be working perfectly fine, however I am quite inexperienced with using screen readers so it might not be perfect! You may want to test it out yourself. Animation2 has aria tags(credits to scottaohara for helping with this) and should be quite accessible, although not perfect.

GIFs

Animation 1

Animation 2

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.